在开发Angular2应用时,像组件设计、路由设计以外,对于一个较大型的应用,我们还需要设计模块。例如,将一个应用分成几个功能模块,以及有哪些公用模块。公用模块里面应该放公用的service类,例如权限验证、登录、获取用户信息、全局的错误处理、工具类等,还有封装的指令或组件。而在某一个功能模块里面,只处理这个模块里面的业务,尽量不和其他模块交互。
首先需要注意的是路由。我们把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块。
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h60403.shtml