umi SSR 打包配置优化

我这里有 SEO 的需求，所以需要做 SSR ,本文主要记录 umi ssr(服务端渲染)配置如何优化，仅记录本人实践过程中所用到的配置优化，仅供参考。

开发环境

win 10 + React 17 + umi 3.5.18 + node 14.15.1

如何查看打包后包体大小及各依赖大小

package.json 中配置命令

scripts:{
    ...
    "analyze": "cross-env UMI_ENV=prod ANALYZE=1 umi build"
    ...
}

执行 npm run annalyze 就会输出包分析结果。

umi 配置(.umirc.ts 或者 config.ts)

1. 开启服务端渲染

    ssr:{}

2.调整 splitChunks 策略，减少整体尺寸

项目中使用了 antd 第三方依赖，可通过 splitChunks 配置调整公共依赖的提取策略。

export default {
  dynamicImport: {},
  chunks: ['vendors', 'umi'],
  chainWebpack: function (config, { webpack }) {
    config.merge({
      optimization: {
        splitChunks: {
          chunks: 'all',
          minSize: 30000,
          minChunks: 3,
          automaticNameDelimiter: '.',
          cacheGroups: {
            vendor: {
              name: 'vendors',
              test({ resource }) {
                return /[\\/]node_modules[\\/]/.test(resource);
              },
              priority: 10,
            },
          },
        },
      }
    });
  },
}

3.如果开发过程中热更新慢或者修改代码后增量编译，可调整 SourceMap 生成方式

// 禁用 sourcemap
export default {
  devtool: false,
};

// 或者

// 使用最低成本的 sourcemap 生成方式，默认是 cheap-module-source-map
export default {
  devtool: 'eval',
};

4.配置 externals 将大尺寸依赖从外部引入，减少编译消耗

比如：react 、react-dom 、charts等

export default {
  // 配置 external
  externals: {
    'react': 'window.React',
    'react-dom': 'window.ReactDOM',
  },

  // 引入被 external 库的 scripts
  // 区分 development 和 production，使用不同的产物
  scripts: process.env.NODE_ENV === 'development' ? [
    'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.development.js',
    'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.development.js',
  ] : [
    'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.production.min.js',
    'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.production.min.js',
  ],
}

注意：

如果要支持 IE10 或以下，external react 还需要额外引入补丁，比如 https://gw.alipayobjects.com/os/lib/alipay/react16-map-set-polyfill/1.0.2/dist/react16-map-set-polyfill.min.js
如果 external antd，需同时 external 额外的 moment、react 和 react-dom，并在 antd 前引入。

5.开启按需加载

dynamicImport: {},

6.根据项目情况自行判断是否开启预渲染

预渲染会给每个页面输入 html, 一般静态网站适合使用。

exportStatic: {},

7. 静态资源使用CDN, 通过 publicPath 配置静态资源 CDN 地址。

publicPath:"https://www.cdn.com/"

参考链接

编译提速的配置参考： umi 如何做编译提速