vue 项目优化

haogemr2023-07-22 14:49

去除冗余的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版本有关