vuejs 2.x；gzip文件压缩 compression-webpack-plugin；可视化资源分析webpack-bundle-analyzer；splitChunks分包；

let pluginValue = [];
if (process.env.VUE_DORP_DEBUGGER === "true") {
  const BundleAnalyzerPlugin =
    require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
  const TerserPlugin = require("terser-webpack-plugin");
  const CompressionPlugin = require("compression-webpack-plugin");
  pluginValue = [
    new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },
    }),
    // 性能分析
    new BundleAnalyzerPlugin(),
    // gzip 文件压缩
    new CompressionPlugin({
      test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
      threshold: 10240, // 归档需要进行压缩的文件大小最小值 10k
      deleteOriginalAssets: false, // 是否删除原文件
    }),
  ];
}
module.exports = {
  publicPath: "./",
  lintOnSave: false,
  configureWebpack: {
    plugins: pluginValue,
  },
  chainWebpack(config) {
    config.optimization.splitChunks({
      chunks: "all",
      minSize: 30000,
      maxSize: 0,
      maxAsyncRequests: 6, // 每个异步加载模块最多能被拆分的数量
      maxInitialRequests: 6, // 每个入口和它的同步依赖最多能被拆分的数量
      cacheGroups: {
        vendors: {
          name: "chunk-vendors",
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: "all",
        },
        common: {
          name: "chunk-common",
          minChunks: 2,
          priority: -20,
          chunks: "initial",
          reuseExistingChunk: true,
        },
        "element-ui": {
          name: "element-ui",
          test: /[\\/]element-ui[\\/]/,
          chunks: "all",
          priority: 0,
        },
        "element-ui/lib/utils": {
          name: "element-ui-utils",
          test: /[\\/]element-ui[\\/]lib[\\/]utils/,
          chunks: "all",
          priority: 1,
        },
        "element-ui/lib/table.js": {
          name: "element-ui-tablejs",
          test: /[\\/]element-ui[\\/]lib[\\/]table.js/,
          chunks: "all",
          priority: 1,
        },
        "element-ui/lib/tree.js": {
          name: "element-ui-treejs",
          test: /[\\/]element-ui[\\/]lib[\\/]tree.js/,
          chunks: "all",
          priority: 1,
        },
        "element-ui/lib/select.js": {
          name: "element-ui-selectjs",
          test: /[\\/]element-ui[\\/]lib[\\/]select.js/,
          chunks: "all",
          priority: 1,
        },
        echarts: {
          name: "echarts",
          test: /[\\/]echarts[\\/]/,
          chunks: "all",
          priority: 0,
        },
        zrender: {
          name: "zrender",
          test: /[\\/]zrender[\\/]/,
          chunks: "all",
          priority: 0,
        },
        vue: {
          name: "vue",
          test: /[\\/]vue[\\/]/,
          chunks: "all",
          priority: 0,
        },
        sortablejs: {
          name: "sortablejs",
          test: /[\\/]sortablejs[\\/]/,
          chunks: "all",
          priority: 0,
        },
        "decimal.js": {
          name: "decimaljs",
          test: /[\\/]decimal.js[\\/]/,
          chunks: "all",
          priority: 0,
        },
      },
    });
  },
  // productionSourceMap: true,
  devServer: {
    // https
    https: false,
    // 主机名
    host: "0.0.0.0",
    // 端口号
    port: 8890,
    // 自动打开浏览器
    // open: true,
    // 跨域
    proxy: {
      "/dev": {
        target: "http://XXX",
        changeOrigin: true,
        pathRewrite: {
          "^/dev": "/",
        },
      },
    },
  },
};

nginx 配置 gizp

gzip on; # 开启gzip压缩
gzip_static on; #开启gzip静态压缩功能（会直接使用前端代码打包构建时，自动压缩代码成gz文件）
gzip_min_length 4k; # 小于4k的文件不会被压缩，大于4k的文件才会去压缩
gzip_buffers 16 8k; # 处理请求压缩的缓冲区数量和大小，比如8k为单位申请16倍内存空间；使用默认即可，不用修改
gzip_http_version 1.1; # 早期版本http不支持，指定默认兼容，不用修改
gzip_comp_level 2; # gzip 压缩级别，1-9，理论上数字越大压缩的越好，也越占用CPU时间。实际上超过2的再压缩，只能压缩一点点了，但是cpu确是有点浪费。因为2就够用了
gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/x-woff font/ttf; # 压缩的文件类型 MIME类型
gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，一般情况下建议开启

开启gzip_static on; #开启gzip静态压缩功能报错：unknown directive “gzip_static”
执行 nginx -t 命令，检查nginx配置文件是否正确，报错信息如下

[root@localhost sbin]# ./nginx -c /usr/local/nginx/conf/nginx.conf
nginx: [emerg] unknown directive “gzip_static” in /usr/local/nginx/conf/nginx.conf:46

原因是nginx缺少gzip_static模块，给现有nginx添加模块：

进入nginx安装目录同级目录，执行./nginx -V 查看当前Nginx已编译的模块，看到的可能是如下内容

$ ./nginx -V
nginx version: nginx/1.19.6
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-39) (GCC) 
built with OpenSSL 1.0.2k-fips  26 Jan 2017
TLS SNI support enabled
configure arguments: --prefix=/opt/nginx/ --user=www --group=www --prefix=/opt/nginx/ --with-http_ssl_module --with-http_stub_status_module

很简单，把原来的arguments拷贝过来，增加–with-http_gzip_static_module即可，执行命令如下:

./configure --prefix=/opt/nginx/ --user=www --group=www --prefix=/opt/nginx/ --with-http_ssl_module --with-http_stub_status_module --with-http_gzip_static_module

执行make，千万不要 make&install，如果直接执行install会直接替换，make命令执行完成之后在编译目录objs文件下面有个nginx执行文件，此时我们把原来的sbin目录下nginx执行文件备份一下，将新编译的nginx二进制文件拷贝到原执行文件的位置

cd /usr/local/nginx/sbin
mv nginx nginx.xxxxxx
cp ../nginx-1.19.6/objs/nginx .

我们看一下新的编译文件模块信息，已经包含了新的模块

./nginx -V
nginx version: nginx/1.19.6
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-39) (GCC) 
built with OpenSSL 1.0.2k-fips  26 Jan 2017
TLS SNI support enabled
configure arguments: --prefix=/opt/nginx/ --user=www --group=www --prefix=/opt/nginx/ --with-http_ssl_module --with-http_stub_status_module --with-http_gzip_static_module

执行 nginx -s reload 重启nginx即可

执行make 时报错：error: this statement may fall through [-Werror=implicit-fallthrough=] h ^= data[2] ＜＜ 16；

cd /root/nginx-1.19.6/objs
vim Makefile

需要把 vim Makefile 的下面这句话的 “-Werror” 删除，再执行 make 就可以了

CFLAGS =  -pipe  -O -W -Wall -Wpointer-arith -Wno-unused -Werror -g  -I../nginx-http-flv-module