前端vue项目性能优化打包压缩、去掉亢余文件
🚀作者简介
主页:水香木鱼的博客
专栏:项目优化
能量:🔋容量已消耗1%,自动充电中…
笺言:用博客记录每一次成长,书写五彩人生。
📒技术聊斋
(一)打包压缩
介绍:
compression-webpack-plugin
插件通过压缩算法,将前端打包好的资源文件进一步压缩,生成指定的、体积更小的压缩文件,让浏览器能够更快的加载资源。
Ⅰ、安装命令
注意:版本要求在
@6以下
npm install --save-dev compression-webpack-plugin@5.0.2
Ⅱ、前端 vue.config.js
配置
const CompressionWebpackPlugin = require("compression-webpack-plugin"); //引入打包压缩插件
const productionGzipExtensions = ["js", "css"]; //压缩js 和css文件
module.exports = {
configureWebpack: {
plugins: [
// 配置压缩
new CompressionWebpackPlugin({
filename: "[path].gz[query]", //压缩后的文件名
algorithm: "gzip", //使用gzip压缩
test: productionGzipExtensions, //压缩文件格式
threshold: 10240, //只有大小于该值的资源会被处理 单位是bytes 默认是0
minRatio: 0.8, //压缩率小于1才会压缩
deleteOriginalAssets: true, //是否删除原资源
}),
],
},
};
Ⅲ、服务端 nginx.conf
配置
在
http
模块内配置如下👇
http{
gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_buffers 4 32k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6].";
}
重启 nginx
systemctl restart nginx
(二)去除亢余文件
介绍:
useless-files-webpack-plugin
插件通过过滤算法,在打包时去除项目当中产生的亢余文件,从而减轻包体积
Ⅰ、安装命令
npm i useless-files-webpack-plugin -S
Ⅱ、vue.config.js
配置
const UselessFile = require("useless-files-webpack-plugin"); //去除亢余文件
module.exports = {
configureWebpack: {
plugins: [
//去除亢余文件
new UselessFile({
root: "./src", // 项目目录
out: "./fileList.json", // 输出文件列表
// out: (files) => deal(files), // 或者回调处理
clean: false, // 删除文件,
exclude: path, // 排除文件列表, 格式为文件路径数组
}),
],
},
};
Ⅲ、unused-files.json
文件是什么?
打包时会在项目的根目录下生成
unused-files.json
文件, 保存着没有用的文件列表。
注意:根据列表中的提供路径,核对相应文件是否需要保留。无需保留,手动删除即可。
如何清理无用的文件?【谨慎操作,按照操作步骤进行操作!!!】
当我们更新迭代后,可能第一版本的页面已经无用了,我们如何快速清理呢?
- 在vue.config.js配置文件内把
clean: false
属性更改为true
- 重新启动项目:
npm run dev/serve
或者npm run build
即可自动清除冗余文件。- 最后一步很关键,记得把
clean: true
更改为false
,再次执行第二步
拓展阅读:compression-webpack-plugin 实践
📓精品推荐
🔋前端element-ui组件库el-card卡片【hover效果与点击事件(点击无效用@click.native=““)解决】
🔋vue非常实用的几行代码【日期处理、字符串处理、数组处理、颜色操作】
🔋vue实现随机验证码(数字类型、字母类型)业务【适用于登录页、网页安全码】
木鱼谢语:感谢各位技术大牛们的点赞👍收藏🌟,每一期都会为大家带来快速适用于业务的文章,让大家做到cv即可。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgggece
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13