vue 项目优化

去除冗余的css

消除框架中未使用的CSS,初步达到按需引入的效果

使用背景:vue2.x, webpack3.x

使用插件:purifycss-webpack

安装:

js 复制代码
npm i purifycss-webpack purify-css glob-all -D

安装后各个插件的版本:

"glob-all": "^3.3.1",

"purify-css": "^1.2.5",

"purifycss-webpack": "^0.7.0",

使用:

在 \build\webpack.prod.conf.js

js 复制代码
const PurifyCSSPlugin = require('purifycss-webpack');
const glob = require('glob-all');

plugins: [
	new PurifyCSSPlugin({
	  paths: glob.sync([
	    path.join(__dirname, '../index.html'),
	    path.join(__dirname, '../src/**/*.vue')
	    //注意:这里要写上所有用到css的地方
	  ])
	})
]

打包后效果:

原大小:

使用后:

页面效果一切正常,不过随便在vue文件里定义的,没有用到的一些css,并没有被删除掉

官网:
PurgeCSS 中文文档
PurifyCSS Plugin

还有个去除css的插件是purgecss-webpack-plugin,但是使用一直不成功,暂时没有办法解决,可能和node版本有关

相关推荐
上单带刀不带妹几秒前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 分钟前
typescript结构化类型应用两例
javascript
杨进军21 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW36 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字42 分钟前
Kotlin lazy 委托的底层实现原理
前端
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956391 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架