使用Angular CLI提供的默认配置,将共享模块从entry
移到shared
数组中。例如:
// webpack.config.js
module.exports = {
entry: {
app: './src/app.js',
vendor: ['./src/vendor.js', './src/shared.js']
},
...
};
应该改为:
// webpack.config.js
module.exports = {
entry: {
app: './src/app.js',
vendor: './src/vendor.js'
},
...
optimization: {
splitChunks: {
cacheGroups: {
shared: {
name: 'shared',
chunks: 'initial',
minChunks: 2
}
}
}
}
};
然后,在app.module.ts
中使用共享模块:
// app.module.ts
import { NgModule } from '@angular/core';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
SharedModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
这样,共享模块将会在名为shared.[hash].js
的文件中被打包,可以被其他模块共享引用,减少了重复代码的加载,提升了应用的性能。
下一篇:Angular共享数据