在React應(yīng)用中，我們通常是直接將某個模塊導(dǎo)入到頁面中，這樣做導(dǎo)致的結(jié)果是打包出來的包體積過大处坪。尤其是在引入了巨大第三庫的情況下疆股，會將第三方庫也直接打包進去费坊。因此我們需要關(guān)注我們的應(yīng)用中包含的代碼，避免因體積過大而導(dǎo)致加載時間過長旬痹。
對代碼進行分割能夠“懶加載”當(dāng)前所需要的內(nèi)容附井，能夠提升應(yīng)用的性能。盡管這樣并沒有減少應(yīng)用的整體代碼體積两残，但是可以避免加載當(dāng)前不需要的代碼永毅，在初始加載的時候可以減少所需加載的代碼量。
下面人弓，我們分別來介紹下在 React 中實現(xiàn)代碼分割的幾種方式沼死。
1、import()
import()是webpack提供的用于分割代碼的一種方法崔赌，該方法的返回結(jié)果是Promise意蛀，當(dāng)文件加載完成后會將模塊導(dǎo)出給promise.then方法的回調(diào)中耸别。
// 使用 import 動態(tài)導(dǎo)入模塊
import('./math').then((math) => {
console.log(math.add(5, 10))
})
當(dāng) Webpack 解析到該語法時，會自動進行代碼分割
2县钥、React.lazy+React.Suspense
React.lazy 方法可以讓我們動態(tài)加載組件太雨，有助于縮減打包后 bundle 的體積，并延遲加載在初次渲染時未用到的組件
const AsyncComponent = React.lazy(() => import('./OtherComponent'));
React.lazy 返回的是一個異步組件 不能單獨使用魁蒜，需要配合 React.Suspense 使用囊扳。當(dāng)這個異步組件的狀態(tài)是 pending 時顯示的是 Suspense 中 fallback 的內(nèi)容，只有 resolve 時才會顯示加載好的組件兜看。如此使得我們可以在使用 lazy 組件時做優(yōu)雅降級（如在 fallback添加 loading 效果等）锥咸。
3、import()+React Loadable
React Loadable 是一個輕量級的代碼分割組件细移，它是一個高階組件搏予，能讓你的應(yīng)用程序在渲染之前動態(tài)的加載任何模塊。
4弧轧、UmiJS 按需加載
export default {
dynamicImport: {},
}
