vue前端项目打包优化
由于项目内引用资源较多,且由webpack打包后生成的JS文件较大,在生产服务器中加载速度过于缓慢,所以前端需要开启打包压缩,提升加载速度,优化用户的使用体验.
gzip压缩的原理及优缺点
原理
打包后会生成两种格式文件,一种为原生JS,一种为Gzip格式,Gzip 压缩背后的原理，是在一个文本文件中找出一些重复出现的字符串、临时替换它们，从而使整个文件变小。根据这个原理，文件中代码的重复率越高，那么压缩的效率就越高，使用 Gzip的收益也就越大。反之亦然。Gzip压缩比率在3到10倍左右，可以大大节省服务器的网络带宽。而在实际应用中，并不是对所有文件进行压缩，通常只是压缩静态文件.
优点
减少文件大小;
减少传输的时间;
减少网站流量;
缺点
需要nginx、服务端的支持，占用了一些服务器和客户端的CPU；
操作失误，会造成网站无法访问；
开启gzip打包压缩
1.前端安装打包压缩插件
npm i compression-webpack-plugin@5.0.2
安装前端打包压缩插件compression-webpack-plugin,推荐安装5.0.2版本,安装过高版本可能会产生 "ERROR TypeError:Cannot read property 'tapPromise' of undefined" 错误.
2. 在vue.config.js文件中,打包时配置开启打包压缩
const CompressionWebpackPlugin = require("compression-webpack-plugin") // 对压缩插件进行引用
module.exports = {
chainWebpack: (config) => {
if (process.env.NODE_ENV === "prod" || process.env.NODE_ENV === "test") {
config.plugin("CompressionPlugin").use(
new CompressionWebpackPlugin({
filename: "[path].gz[query]", // 压缩后的文件名
algorithm: "gzip", // 使用gzip压缩
test: /\.js$|\.css$/, // 匹配文件名
threshold: 5120, // 对超过5k的数据压缩
minRatio: 1, // 压缩率小于1才会压缩
deleteOriginalAssets: false // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
})
)
}
}
}
开启打包环境判断,本地开发时,无需进行打包压缩,顶部注意对插件的引用,否则打包时会提示CompressionPlugin undefined的错误;
3. Nginx服务端配置
gzip on; //开启服务器实时gzip
gzip_static on; //开启静态gz文件返回
gzip_min_length 1k; //启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_buffers 32 4k; // 设置压缩所需要的缓冲区大小
gzip_http_version 1.0; //设置gzip压缩针对的HTTP协议版本
gzip_comp_level 7; //gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml; //进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_vary on; //是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_disable "MSIE [1-6]\."; //# 禁用IE 6 gzip
服务端同时需要对Nginx进行配置,可挑选进行开启,主要是开启前两个;
完成配置后进行打包部署,会发现文件中多出XX.gz格式文件,同时服务器开启gzip配置后,浏览器在查找js文件时,会优先查找.gz格式文件,若文件查找不到,则会去查找同名的.js .css等文件.
