html5異步加載路由組件的方法

這篇文章主要介紹“html5異步加載路由組件的方法”，在日常操作中，相信很多人在html5異步加載路由組件的方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html5異步加載路由組件的方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　首先需要注意的是路由。我們把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。

　　create-react-app 環境 webpack自動分片打包

　　需要babel支持import語法

　　import ("").then(

　　ChildB=>console.log(ChildB)

　　)

　　方式  const Child=asyncComponent(()=>import(""))

　　asyncComponent函數需要自行封裝

　　通過第三方插件實現react-loadable

　　路由 <Route path=.. component={Home}/>  路由懶加載

　　原理：

　　利用webpack對代碼進行分割是懶加載的前提，懶加載就是異步調用組件，需要時候才下載,

　　告訴webpack把組件打包成塊，告訴路由激活時觸發一個函數，函數再加載組件，加載時會請求組件的塊代碼，塊代碼會插入當前組件的樣式。實現流程如下：

　　1、webpack配置:

　　output:  chunkFilename:'chunks/[name]-[chunkhash:8].js'

　　解釋: build之后的代碼更便于識別

　　2、路由配置：

　　const home=()=>import( "");

　　注意：import 導入 需要安裝 babel-plugin-syntax-dynamic-import ,import會被提升,配置 babelrc  "plugins": ["syntax-dynamic-import"]

　　解釋：webpackChunkName: "group-home" 給塊命名 | 同名會拆到一個塊，可減少請求次數

　　3、組件內部注冊異步組件：

　　const navbar=()=>import( "");

　　注冊組件: components:{navbar}

　　navbar 不異步的話，代碼會打到app.js,而不是home塊或者navbar塊。

到此，關于“html5異步加載路由組件的方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！