0
点赞
收藏
分享

微信扫一扫

前端vue项目性能优化【打包压缩、去除亢余文件】

E_topia 2022-10-18 阅读 183


🚀作者简介

主页:水香木鱼的博客

专栏:项目优化

能量:🔋容量已消耗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​​文件, 保存着没有用的文件列表。

注意:根据列表中的提供路径,核对相应文件是否需要保留。无需保留,手动删除即可。

福利:​​若依快速构建 web 应用程序​​

木鱼谢语:感谢各位技术大牛们的点赞👍收藏🌟,每一期都会为大家带来快速适用于业务的文章,让大家做到cv即可。

举报

相关推荐

0 条评论