webpack 55M bundle.js 优化，加快map 渲染

1.通过webpack-bundle-analyzer开启包大小可视化界面

webpack5  → compression-webpack-plugin 最低版本 7.x
webpack4 → compression-webpack-plugin 最高版本 6.x 

//请注意webpack版本,譬如webpack4
npm i webpack-bundle-analyzer@4.5.0 -D

//头部引入
const {
  BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer')

//插件模块配置
 plugins: [
    new BundleAnalyzerPlugin(),
]

2.开启webpack 压缩, 通过浏览器解压、加载 gz,br

• gzip压缩

const CompressionPlugin = require('compression-webpack-plugin')

//plugins配置项
  plugins: [
    // gzip
    new CompressionPlugin({
      filename: "[path][base].gz",
      algorithm: "gzip",
      test: /.(js|css|html|svg)$/i,
      threshold: 1024 *10 , //10k
      minRatio: 0.8,
    })
  ]

同时，服务端需要开启对应的gzip配置。

gzip  on;
gzip_min_length 10k;
gzip_comp_level 1;
gzip_types text/plain application/json application/javascript text/css;
gzip_vary on;

• brotliCompress 压缩

一种更加高效的压缩方式。而且各大浏览器基本都支持，但是也严格，需要https才可以，http中不支持Brotli.

const zlib = require("zlib");

module.exports = {
  plugins: [
    new CompressionPlugin({
      filename: "[path][base].br",
      algorithm: "brotliCompress",
      test: /.(js|css|html|svg)$/i,
      compressionOptions: {
        params: {
          [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
        },
      },
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: false,
    }),
  ],
};

nginx 配置, 另外 nginx默认没有brotli模块，需要安装，编译下

brotli on;  
brotli_comp_level 6;
brotli_buffers 16 8k;
brotli_min_length 20;
brotli_types *;  

3.webpack split-chunks-plugin 切分输出，把业务逻辑独立出来为，同时结合compress+gzip，加快下载包速度

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: true,
      cacheGroups: { //大部分配置与split配置相同
        vendor: {
          test: /[\/]node_modules[\/]/,
          name: 'vendors', // 输出的文件名
          chunks: 'all',
          priority: -10 
        },
         business: {
          test: /[\/]src[\/]/,
          name: 'business', // 输出的文件名
          chunks: 'all',
          priority: -9 
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
    }
  }
};

4. 修改代码，改用ES module , 通过类似 import { } from 'antd' 方式导入导出code，便于下一步Tree shaking
5. 其他的工具：根据分析，进行enhance

npx webpack --mode production --profile --json > stats.json

[参考文献]:

compression-webpack-plugin

nginx配置

splitChunks