代码拆分指南

Umi 4 默认按页拆包、按需加载（这近似等同于 Umi 3 中的 dynamicImport），通过 loading.tsx 来自定义加载动画。

使用分包策略

Umi 4 内置了不同的代码拆分策略 ( codeSplitting ) ，通过配置开启：

// .umirc.ts
export default {
  codeSplitting: {
    jsStrategy: 'granularChunks',
  },
};

这会按照一定的优化策略进行自动分包，若需手动进行更细致的分包，请参见下文。

手动拆分

当你的产物体积变大时，可进一步手动拆包：

import { lazy, Suspense } from 'react'

// './Page' 该组件将被自动拆出去
const Page = lazy(() => import('./Page'))

export default function() {
  return (
    <Suspense fallback={<div>loading...</div}>
      <Page />
    </Suspense>
  )
}

通常情况下，我们会手动拆分引用了较大第三方库的组件，实现按需加载。

分析产物构成

通过指定 ANALYZE 环境变量可以分析产物构成，根据分析结果来修改代码和进一步决策。

代码拆分指南

使用分包策略

手动拆分

分析产物构成

TABLE OF CONTENTS