VUE-CLI打包 +nginx 开启gzip

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