umi項目打包優化

歡迎關注前端早茶，與廣東靚仔攜手共同進階

前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~

 

前言

umi打包的時候，居然用了30分鍾。有必要進行壓縮，經過優化后，從30分鍾到4分鍾。

具體方案

關鍵插件和umi版本：

 

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

 

在.umirc.ts文件添加

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
    exclude: [],
  },
  .....
  dynamicImport: {},
  chunks: ['vendors', 'umi'],
  chainWebpack: function (config, { webpack }) {
    config.merge({
      optimization: {
        splitChunks: {
          chunks: 'all',
          automaticNameDelimiter: '.',
          name: true,
          minSize: 30000,
          minChunks: 1,
          cacheGroups: {
            vendors: {
              name: 'vendors',
              chunks: 'all',
              test: /[\\/]node_modules[\\/]/,
              priority: -12,
            },
          },
        },
      },
    });
    if (process.env.NODE_ENV === 'production') {
      //gzip壓縮
      config.plugin('compression-webpack-plugin').use(CompressionPlugin, [
        {
          test: /\.js$|\.html$|\.css$/, //匹配文件名
          threshold: 10240, //對超過10k的數據壓縮
          deleteOriginalAssets: false, //不刪除源文件
        },
      ]);
    }
  },
  theme: {},
 .......
});

 

nginx配置支持請求壓縮內容

在nginx配置文件內添加

 # 開啟和關閉gzip模式
gzip on;

# gizp壓縮起點，文件大於1k才進行壓縮
gzip_min_length 1k;

# gzip 壓縮級別，1-9，數字越大壓縮的越好，也越占用CPU時間
gzip_comp_level 6;

# 進行壓縮的文件類型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/xml text/javascript application/json;

# nginx對於靜態文件的處理模塊，開啟后會尋找以.gz結尾的文件，直接返回，不會占用cpu進行壓縮
gzip_static on;

# 是否在http header中添加Vary: Accept-Encoding，建議開啟
gzip_vary on;

# 設置壓縮所需要的緩沖區大小，以4k為單位，如果文件為7k則申請2*4k的緩沖區
gzip_buffers 4 16k;

 

歡迎關注前端早茶，與廣東靚仔攜手共同進階

前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~