UMI packaging and subcontracting, and compressing to gzip

umi Packing and subcontracting 、 Compress it into gzip

1、 Compression plug-ins 【 Note that version 】

"compression-webpack-plugin": "^6.0.0",

2、 stay .umirc.ts （config.js、config.ts） File to add

  chunks: ['vendors', 'umi'],
  chainWebpack: function (config, {
      webpack }) {
    
    config.merge({
    
      optimization: {
    
        splitChunks: {
    
          chunks: 'all',
          minSize: 30000,
          minChunks: 3,
          automaticNameDelimiter: '.',
          cacheGroups: {
    
            react: {
    
              name: 'react',
              priority: 20,
              test: /[\\/]node_modules[\\/](react|react-dom|react-dom-router)[\\/]/,
            },
            vendor: {
    
              name: 'vendors',
              test({
      resource }) {
    
                return /[\\/]node_modules[\\/]/.test(resource);
              },
              priority: 6,
            },
            antd: {
    
              name: "antd",
              test: /[\\/]node_modules[\\/]antd[\\/]/,
              chunks: "all",
              priority: 10
            },
            xlsx: {
    
              name: "xlsx",
              test: /[\\/]node_modules[\\/]xlsx[\\/]/,
              chunks: "async",
              priority: 10
            },
            reactcolor: {
    
              name: "xlsx",
              test: /[\\/]node_modules[\\/]react-color[\\/]/,
              chunks: "async",
              priority: 19
            },
            wangeditor: {
    
              name: 'wangeditor',
              priority: 21,
              test: /[\\/]node_modules[\\/](wangeditor|@wangeditor|@wangeditor\/editor|@wangeditor\/editor-for-react)[\\/]/,
            },
            uiwmap: {
    
              name: 'uiwmap',
              priority: 20,
              test: /[\\/]node_modules[\\/](uiw|@uiw|@uiw\/react-baidu-map|@uiw\/react-baidu-map-require-script)[\\/]/,
            },
            charts: {
    
              name: 'charts',
              priority: 20,
              test: /[\\/]node_modules[\\/](@ant-design\/charts)[\\/]/,
            },
            async: {
    
              chunks: 'async',
              minChunks: 2,
              name: 'async',
              maxInitialRequests: 1,
              minSize: 0,
              priority: 5,
              reuseExistingChunk: true,
            },
          },
        },
      }
    });
    if (process.env.NODE_ENV === 'production') {
    
      //gzip Compress 
      config.plugin('compression-webpack-plugin').use(CompressionPlugin, [
        {
    
          test: /\.js$|\.html$|\.css$/, // Match file name 
          threshold: 10240, // For more than 10k Data compression 
          deleteOriginalAssets: false, // Don't delete the source file 
        },
      ]);
    }
    // To filter out momnet Those unused internationalization files 
    config.plugin("replace").use(require("webpack").ContextReplacementPlugin).tap(() => {
    
      return [/moment[/\\]locale$/, /zh-cn/];
    });
  }

3、nginx To configure

 #  On and off gzip Pattern 
gzip on;

# gizp Compress the starting point , File is larger than 1k To compress 
gzip_min_length 1k;

# gzip  Compression level ,1-9, The bigger the number, the better the compression , More and more occupied CPU Time 
gzip_comp_level 6;

#  The type of file to be compressed .
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/xml text/javascript application/json;

# /**** At present, only one additional line is effective **/
# nginx For static file processing module , When it is turned on, it will look for .gz Final document , Go straight back to , Will not occupy cpu Compress 
gzip_static on;

#  Whether in http header Add Vary: Accept-Encoding, Recommended Opening 
gzip_vary on;

#  Set the buffer size required for compression , With 4k In units of , If the document is 7k Then apply for 2*4k The buffer 
gzip_buffers 4 16k;