angular實現
在開發Angular2應用時，像組件設計、路由設計以外，對於一個較大型的應用，我們還需要設計模塊。例如，將一個應用分成幾個功能模塊，以及有哪些公用模塊。公用模塊裡面應該放公用的service類，例如權限驗證、登錄、獲取用戶信息、全局的錯誤處理、工具類等，還有封裝的指令或組件。而在某一個功能模塊裡面，只處理這個模塊裡面的業務，儘量不和其他模塊交互。
拿之前教程中的TodoList應用來說，只有home頁面和2個todo頁面，我們把todo相關的功能放在一個子模塊裡面，為了演示，又加了一個簡單的名字叫lazy的模塊。我們將把todo模塊和lazy模塊配置成延時加載的模塊
子模塊路由
首先需要注意的是路由。在之前的例子中，我們把todo相關的路由定義在一個文件中，然後在app的路由定義中把所有路由合併到一起。 todo.routes.ts 的內容如下：
然後在 app.routes.ts 中定義一個路由模塊：
最後，在AppModule裡面引入這個路由模塊。
延時加載子模塊
Angular的路由模塊已經提供了 loadChildren 定義可以直接幫我們實現該功能。下面就是新的app路由定義
在這裡，我們對於 todo 路徑，交給 app/todo/todo.module 裡面的 TodoModule 模塊處理。而在 TodoModule 模塊裡，已經有一個子路由的定義。
最後，再修改 app.module.ts ，保證它裡面不再引入 TodoModule 。如此一來，我們在主模塊AppModule裡面，沒有引入 todo 模塊的任何組件或服務。這樣就能在完全脫離 TodoModule 模塊的情況下，運行主模塊的功能。當用戶打開 /todo 裡面的url時，就加載 app/lazy/lazy.module 裡面的 LazyModule 模塊，並交由它來處理響應的url。
react 實現
create-react-app 環境 webpack自動分片打包
需要babel支持import語法 import ("./ChildB.js").then( ChildB=>console.log(ChildB) )
方式1 const Child = asyncComponent(()=>import("./Child"))
asyncComponent函數需要自行封裝
方式3通過第三方插件實現react-loadable
路由
VUE 實現
原理:
利用webpack對代碼進行分割是懶加載的前提，懶加載就是異步調用組件，需要時候才下載, 告訴webpack把組件打包成塊，告訴路由激活時觸發一個函數，函數再加載組件,加載時會請求組件的塊代碼，塊代碼會插入當前組件的樣式
實現流程如下：
1webpack配置:
output: chunkFilename:'chunks/[name]-[chunkhash:8].js' 解釋:build之後的代碼更便於識別
2.路由配置:
const home =()=>import(/* webpackChunkName: "group-home" */ "../components/home.vue"); 注意:import 導入 需要安裝 babel-plugin-syntax-dynamic-import ,import會被提升,配置 babelrc "plugins": ["syntax-dynamic-import"] 解釋:webpackChunkName: "group-home" 給塊命名 | 同名會拆到一個塊，可減少請求次數
3.組件內部註冊異步組件:
const navbar =()=>import(/* webpackChunkName: "group-home" */ "./components/navbar.vue"); 註冊組件:components:{navbar} navbar 不異步的話，代碼會打到app.js,而不是home塊或者navbar塊
閱讀更多 千鋒H5 的文章
