UmiJSUmiJS
  • 介绍
  • 指南
  • API
  • Umi Max
  • 博客
⌘ K
EN
Blog
使用 Umi 开发一个 Blog
Umi 4 RC 发布
比 Vite 还快的 MFSU
独立使用 MFSU
代码拆分指南
非现代浏览器兼容
物理构建缓存
最后更新时间：
Open-source MIT Licensed | Copyright © 2017-present

TABLE OF CONTENTS

代码拆分指南

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 环境变量可以分析产物构成，根据分析结果来修改代码和进一步决策。