共计 854 个字符,预计需要花费 3 分钟才能阅读完成。
要在 Vue CLI3 中启用 gzip 压缩,能够应用 compression-webpack-plugin 插件。
1. 装置插件:在终端中运行以下命令装置 compression-webpack-plugin 插件:
npm install --save-dev compression-webpack-plugin
2. 批改配置:在 vue.config.js 文件中增加以下代码:
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new CompressionPlugin({
algorithm: 'gzip', // 应用 gzip 压缩
test: /\.js$|\.html$|\.mp4$|\.*$|\.css$/, // 匹配文件名
filename: '[path][base].gz[query]', // 压缩后的文件名 (放弃原文件名,后缀加.gz)
minRatio: 1, // 压缩率小于 1 才会压缩
threshold: 10240, // 对超过 10k 的数据压缩
deleteOriginalAssets: false, // 是否删除未压缩的源文件,审慎设置,如果心愿提供非 gzip 的资源,可不设置或者设置为 false(比方删除打包后的 gz 后还能够加载到原始资源文件)})
]
}
}
这将在 webpack 配置中增加 compression-webpack-plugin 插件,并配置它以压缩.js,.html 和.css 文件。3. 从新构建:从新构建 Vue 我的项目,压缩后的文件应该曾经生成了。
如果构建胜利,则在 dist 目录下应该会看到被压缩后的文件,例如 app.js.gz,app.html.gz 等。
编辑 Nginx 配置文件
# 开启 gzip 压缩性能
gzip on;
gzip_min_length 1024;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_types *;
gzip_vary on;
正文完