[英]How do I do code splitting with webpack on angular 2 app?
我有这样的应用程序结构:
├── /dashboard
│ ├── dashboard.css
│ ├── dashboard.html
│ ├── dashboard.component.ts
│ ├── dashboard.service.ts
│ ├── index.ts
├── /users
│ ├── users.css
│ ├── users.html
│ ├── users.component.ts
│ ├── users.service.ts
│ ├── index.ts
├── /login
│ ├── login.css
│ ├── login.html
│ ├── login.component.ts
│ ├── login.service.ts
│ ├── index.ts
├── app.component.ts
├── app.module.ts
├── app.routes.ts
├── app.styles.css
我想将我的应用程序代码拆分成这样的代码:
├── dashboard.js
├── users.js
├── login.js
├── app.js
我似乎无法找到一个如何用webpack做这个的例子。 所以2个问题。 可以这样做吗? 而且,如何做到这一点?
任何线索或帮助将不胜感激。 我整个上午一直在研究这个问题。
Angular文档在这里提出了建议,但没有我能找到的示例或教程。 所以这是可能的,但没有人知道该怎么做?
你可以在这里找到webpack配置
您必须将每一个作为切入点
entry: {
'dashboard': './src/dashboard/index.ts',
'users': './src/users/index.ts',
'login': './src/login/index.ts',
'app': './src/app.module.ts'
}
然后确保没有代码在不同的入口点重复设置它们在commons chunk插件中。 订单是应用程序中遇到的重要代码,随后在仪表板中也很重要,或者用户只会出现在最后一个存在/需要的位置。
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'dashboard', 'login', 'users']
})
]
你也可以从这里获得一些灵感: https : //angular.io/docs/ts/latest/guide/webpack.html#!#common-configuration
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.