vue 项目优化

去除冗余的css

消除框架中未使用的CSS,初步达到按需引入的效果
使用背景:vue2.x, webpack3.x
使用插件:purifycss-webpack

安装:

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/22780.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安卓UI:SearchView

目录 一、SearchView介绍 二、常用方法 (一)、监听器: (二)、常用方法: (三)、其他常用方法 三、例子: MainActivity2 : ChatListAdapter : item_people_view: activity_main2: 运行结果…

实例014 OutLook界面

实例说明 程序主界面包括菜单栏、工具栏、状态栏和树状视图。OutLook界面美观、友好,是一个很实用的程序主界面,并且菜单栏和工具栏是可移动的。运行本例效果如图1.14所示。 图1.14 Out Look界面 技术要点 一般程序的菜单栏和工具栏是不可移动的&…

继承【C++】

继承 继承解决了什么问题?继承的应用场景是什么?简单举例继承的关系语法 继承解决了什么问题? C代码的 可重用性 通过继承实现。 新类从已有类获得已有的特性。 继承的应用场景是什么? 继承是一种设计的结果。(举例…

HTML 第二部分 (前端学习)

由于,HTML的部分实在是太多了,第一部分,还没学一半,就已经抄了1w字。而且可能,真正用上的也比较少,更何况,一直坚持,一个不落的学下去,也存在一点注意力分散的困难&#…

暑假第九天打卡

英语: 新东方六级一单元单词刷题复习 离散: 例12 使用消解算法判断下述公式是否是可满足的: 公式 S p∧(p∨q)∧(p∨q)∧(q∨r)∧(q∨r) 解: S p∧(p∨q)∧(p∨q)∧(q∨r)∧(q∨r) //化为主合取式 循环1: S0 S1 {p…

vue前端下载打开文件

<a href"/static/template/公告导入人员模板.xlsx" id"downloadTemplate" style"">下载模版</a>vue前端下载打开文件

低代码平台之流程自动化测试

随着低代码平台的快速发展&#xff0c;开发人员可以便捷、快速地开发流程应用程序&#xff0c;由于业务流程的复杂化和业务需求的不断变化&#xff0c;对业务流程进行优化和改进将更加频繁&#xff0c;在这个过程中&#xff0c;就要求企业的流程测试的效率和质量需要跟上低代码…

svn迁移到git实际操作

1.到svn项目目录右键选中gitbash打开窗口&#xff0c;执行获取用户并映射成git样式账号命令如下: svn log -q | awk -F | /^r/ {sub("^ ", "", $2); sub(" $", "", $2); print $2" "$2" <"$2"163.cn>…

Python深度强化学习实战 ——OpenAI Gym-CarRacing自动驾驶项目

&#x1f4ad; 写在前面&#xff1a;本篇是关于 OpenAI Gym-CarRacing 自动驾驶项目的博客&#xff0c;面向掌握 Python 并有一定的深度强化学习基础的读者。GYM-Box2D CarRacing 是一种在 OpenAI Gym 平台上开发和比较强化学习算法的模拟环境。它是流行的 Box2D 物理引擎的一个…

HTML <map> 标签

实例 带有可点击区域的图像映射: <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /><map name="planetmap" id="planetmap"><area shape="circle" coords=&q…

领域知识图谱的医生推荐系统:利用BERT+CRF+BiLSTM的医疗实体识别,建立医学知识图谱,建立知识问答系统

项目设计集合&#xff08;人工智能方向&#xff09;&#xff1a;助力新人快速实战掌握技能、自主完成项目设计升级&#xff0c;提升自身的硬实力&#xff08;不仅限NLP、知识图谱、计算机视觉等领域&#xff09;&#xff1a;汇总有意义的项目设计集合&#xff0c;助力新人快速实…

HTML+CSS+JavaScript:九九乘法表

一、需求如图 二、思路及代码 1、JavaScript代码 稍微刷过一点算法题的小伙伴就很容易想到这题需要利用双层for循环来实现&#xff0c;思路也是比较简单的&#xff0c;我在这里就直接放代码了 不添加CSS渲染的代码如下 <!DOCTYPE html> <html lang"en"&…