GZIP
GZIP是网站压缩加速的一种技术,用于优化用户体验,开启后可以加快我们web页面的打开速度,原理是经过服务器压缩,客户端浏览器快速解压的原理,可以大大减少了网站的流量。
1、摇树优化
摇树优化(Tree-Shaking),顾名思义,摇晃树干,将枯死无用的枝条摇掉,仅保留有用的树枝。对应到框架层面理解,就是一个框架的众多组件和API,可以按需使用,把未引用的框架部分裁剪掉。Tree-Shaking 最早由 Rollup 提出,属于死码删除的一种形式。
开启摇树优化的方式非常简单,只需要在manifest.json中打开一个开关即可。
2、开启gzip压缩
1.安装插件
npm i compression-webpack-plugin
npm i webpack
使用时请注意版本,我用最新版本报错Cannot read property 'tapPromise' of undefined,后来降低版本
我这里用的分别是6.1.1和4.46.0
2.在项目根目录新建vue.config.js文件,写入以下内容。
const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack:{
plugins:[
new CompressionWebpackPlugin(
{
filename: "[path][base].gz",
algorithm: "gzip",
test: /\.js$/,
threshold: 10240,
minRatio: 0.8,
exclude: /node_modules/,
}
)
]
}
}