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

相关推荐
一只小风华~1 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟1 小时前
html 实现鼠标滑动点亮横轴
前端·javascript·html
计算机学姐1 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
武昌库里写JAVA3 小时前
C语言 #pragma once - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
iCoding913 小时前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构
mingtianyihou333 小时前
使用 Service Worker 限制请求并发数
前端
张可爱3 小时前
20251017-Vue2八股文整理(上篇)
前端
FanetheDivine3 小时前
ts中如何描述一个复杂函数的类型
前端·typescript
lightgis3 小时前
chrome中的axure插件提示无法不受支持
前端·chrome
速易达网络3 小时前
Vue3 原生移动应用开发来了
前端·javascript·css