1.vue-cli 打包
脚手架默认打包后的是JS文件,如果追求加载速度可以开启gzip压缩打包
第一步 安装webpack插件
npm i compression-webpack-plugin@5.0.1
第二步 配置脚手架
在项目根目录新建vue.config.js
const path = require("path");
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
// 默认在生成的静态资源文件名中包含hash以控制缓存
filenameHashing: true,
// 是否在保存的时候使用 `eslint-loader` 进行检查。
lintOnSave: false,
//开启gzip
configureWebpack: (config) => {
if (process.env.NODE_ENV === "production") {
return {
plugins: [
new CompressionPlugin({
algorithm: "gzip",
test: /\.(js|css)$/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false, // 不删除源文件
minRatio: 0.8, // 压缩比
}),
],
};
}
},
//移除map文件
productionSourceMap: false,
};
这个时候运行npm run build就会出现gz格式文件
image.png
2.nginx配置
nginx默认开启了gzip
gzip on
但是这个命令的意思是nginx调用服务器CPU资源把JS等文件压缩传给客户端,非常占用CPU
既然vue-cli脚手架已经帮我们压缩好了网页代码,
所以nginx直接把gzip格式文件传给客户端就行了,既静态gzip服务
如果客户端支持gzip协议 服务器也有对应的.gz文件 就直接发送gz文件
不用调用CPU再去压缩一遍了
用到的是nginx的内置模块ngx_http_gzip_static_module 模块地址
模块的官网和绝大部分博客都说如果想启用这个模块,需要重新编译一遍nginx
image.png
但是博主是通过ubuntu aptget方式安装的nginx 自动编译好了这个模块 ,直接开启就好啦
开启步骤
第一步
shell链接服务器 输入nginx -V查看是否已开启了该模块
如果你和博主的一样,带了这个模块 说明不用自己再编译了 省事 应该是nginx版本比较新的缘故
image.png
第二步 配置nginx
这个不用全局设置,因为并不是所有的项目都有gz文件
image.png
第三步 重启
nginx -t
nginx –s reload
到此 大功告成!
image.png
