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块