懒加载是一种信仰。
在这个版本号飞起的年代，文章写完的一刹那，发现某几个依赖已经升级了好几个版本了。越是这样，还越是得给后来人写明白。
Webpack 3.5.5 & Angular 4.3.0
首先创建一个 Angular Module
作为一个懒加载的模块，就叫 LazyModule 吧，当然，你肯定知道这个 demo 名字。这个模块的实现跟其他 Angular 模块实现没什么两样。
// import things you need
// import things you made
const modules = []
const components = []
const services = []
@NgModule({
imports: [ ...modules],
declaration: [...components],
provide: [...services]
})
export class LazyModule { }
虽然你可以随意添加你喜欢的内容到懒加载的模块，当然你得顾及 DRY
使用 angular-router-loader 给懒加载的模块添加路由路口
懒加载的触发是通过路由实现的。
export const route:Route = [
{path: '', redirectTo: 'home', pathMatch: 'full'},
//...paths
{path: 'lazy',loadChildren: './path/to/lazy.module#LazyModule'}
]
export const AppRoute = RouterModule.forRoot(routes)
通过 tsconfig 配置编译时对于 LazyModule 的处理方式
懒加载时，JIT vs. AOT 有些不同，可以分两个文件加载tsconfig.json 当然，也可以通过 aot 配置时传入 option 来区分。
tsconfig.aot.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"lib": [
"es2015",
"dom"
]
},
"angularCompilerOptions": {
"genDir": "./aot",
"entryModule": "./angularApp/app/app.module#AppModule",
"skipMetadataEmit": true
},
"compileOnSave": false,
"buildOnSave": false
}
JIT tsconfig.jit.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": true,
"skipLibCheck": true,
"lib": [
"es2015",
"dom"
],
"typeRoots": [
"./node_modules/@types/"
]
},
"exclude": [
"node_modules",
"angularApp/main-aot.ts"
],
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false
}
不同之处：
- sourceMap， 调试时候看到的是出错的源码，而非 error 位置，当然生产模式不需要这东西
- noImplicitAny， 如果你尚不习惯给形参添加类型，这一条置为 false会看到少一点的报错
- suppressImplicitAnyIndexErrors，这条是让 ts 更温和些，如果上一条 false 了，这条就不需要了
- skipLibCheck，这条设置为 true 会节约些时间
- typeRoots，添加 ts 解析路径，加速解析
升级 Webpack 配置处理 lazy loading
由于两边对于 loader 的使用不同，所以还是得分 AOT 和 JIT 版本
webpack.prod.js
output:{
path: '',
filename: '',
chunkFileName: '', //新增名字
publicPath: ''
}
// other configs...
rules:[
{
test: /\.ts$/,
use: [
'awesome-typescript-loader',
'angular-router-loader?aot=true?genDir=/dist'
]
}
]
其中 angular-router-loader 需要传入 aot 配置
webpack.dev.js
module:{
rules:{
test: /\.ts$/,
loaders: [
'awesome-typescript-loader',
'angular-router-loader',
'angular2-template-loader',
'source-map-loader',
'tslint-loader'
]
}
}
尝试，并debug
上边说了，你不可能在任何版本都这么干，debug & find the real way by your self.
