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

相关推荐
大虾写代码7 分钟前
nvm和nrm的详细安装配置,从卸载nodejs到安装NVM管理nodejs版本,以及安装nrm管理npm版本
前端·npm·node.js·nvm·nrm
星哥说事7 分钟前
下一代开源 RAG 引擎,让你的 AI 检索与推理能力直接起飞
前端
....4928 分钟前
Vue3 与 AntV X6 节点传参、自动布局及边颜色控制教程
前端·javascript·vue.js
machinecat10 分钟前
Webpack模块联邦 - vue项目嵌套react项目部分功能实践
前端·webpack
Ares-Wang12 分钟前
Vue2 VS Vue3
javascript
今禾12 分钟前
深入浅出:ES6 Modules 与 CommonJS 的爱恨情仇
前端·javascript·面试
前端小白199512 分钟前
面试取经:Vue篇-Vue2响应式原理
前端·vue.js·面试
子兮曰12 分钟前
⭐告别any类型!TypeScript从零到精通的20个实战技巧,让你的代码质量提升300%
前端·javascript·typescript
前端AK君12 分钟前
如何开发一个SDK插件
前端
小满xmlc13 分钟前
WeaveFox AI 重新定义前端开发
前端