代碼分割
- webpack 處理方式常用有三種
① 入口起點：使用entry配置手動地分離代碼潮尝。
② 防止重復(fù)：使用SplitChunksPlugin去重和分離 chunk。
③ 動態(tài)導(dǎo)入：通過模塊中的內(nèi)聯(lián)函數(shù)調(diào)用來分離代碼。本質(zhì)是通過返回Promise的方式實現(xiàn)異步加載功能
本文重點講解關(guān)于第三種方法 dynamic imports
當(dāng)涉及到動態(tài)代碼拆分時咏连，webpack 提供了兩個類似的技術(shù)诫舅。
①使用符合 ECMAScript 提案 的 import() 語法 來實現(xiàn)動態(tài)導(dǎo)入。
②使用 webpack 特定的 require.ensure
在我的項目中我用的比較多的是②
下面貼代碼
<Route path="/" component={Root}>
<IndexRoute getComponent={(nextState, callback) => {
require.ensure([], function (require) {
callback(null, require('./pages/login'));
});
}}>
</Route>
此法得益于react-router 體用的動態(tài)路由功能
- react-router 提供的動態(tài)路由
React Router 里的路徑匹配以及組件加載都是異步完成的功氨，不僅允許你延遲加載組件，并且可以延遲加載路由配置
Route 可以定義getChildRoutes手幢，getIndexRoute和getComponents這幾個函數(shù)捷凄。它們都是異步執(zhí)行，并且只有在需要時才被調(diào)用围来。我們將這種方式稱之為 逐漸匹配跺涤。
