HTML5技術分享angular開發應用實現

組件異步路由

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

 

 

 

 

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

VUE 實現

原理:

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

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

實現流程以下：

1 webpack配置:

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塊