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版本有关

相关推荐
BillKu1 分钟前
Vue3 + TypeSrcipt 防抖、防止重复点击实例
前端·javascript·vue.js
鱼樱前端2 分钟前
Vue3结合three和babylonjs实现3D数字展厅效果
前端·vue.js
Themberfue5 分钟前
Vue ⑥-路由
前端·javascript·vue.js
whatever who cares7 分钟前
React hook之useRef
前端·javascript·react.js
kooboo china.17 分钟前
Tailwind CSS 实战:基于 Kooboo 构建 AI 对话框页面(八):异步处理逻辑详解
前端·css·人工智能·编辑器·html·交互
天涯学馆20 分钟前
工厂模式在 JavaScript 中的深度应用
前端·javascript·面试
crary,记忆25 分钟前
Angular中Webpack与ngx-build-plus 浅学
前端·webpack·angular·angular.js
newxtc30 分钟前
【JJ斗地主-注册安全分析报告】
开发语言·javascript·人工智能·安全
陪我一起学编程38 分钟前
关于nvm与node.js
vue.js·后端·npm·node.js