如何在 Angular 2 应用程序上使用 webpack 进行代码拆分？

Posted 2023-02-19

【中文标题】如何在 Angular 2 应用程序上使用 webpack 进行代码拆分？

【英文标题】：How do I do code splitting with webpack on angular 2 app?

【发布时间】：2017-02-05 07:48:46

【问题描述】：

我有一个这样的应用结构：

├── /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 文档建议使用 here，但我找不到任何示例或教程。所以这是可能的，但没有人知道怎么做？

你可以找到webpack配置here

【参考方案1】：

您必须将它们中的每一个都作为入口点

entry: 
  'dashboard': './src/dashboard/index.ts',
  'users': './src/users/index.ts',
  'login': './src/login/index.ts',
  'app': './src/app.module.ts'

然后确保在不同的入口点之间没有重复的代码，将它们设置在 commons 块插件中。顺序是应用程序中遇到的重要代码，随后在仪表板中也很重要，否则用户只会出现在它存在/需要的最后一个中。

plugins: [
    new webpack.optimize.CommonsChunkPlugin(
       name: ['app', 'dashboard', 'login', 'users'] 
    )
]

您还可以从这里获得一些灵感： https://angular.io/docs/ts/latest/guide/webpack.html#!#common-configuration

【讨论】：

我没有得到预期的行为。我正在使用异步路由 ex: path: 'dashboard', loadChildren: () => System.import('./dashboard') ，但是当我在上面添加代码时，文件会在应用程序初始化时加载。也许我有一些不好的配置？

它现在是否生成单独的文件？你能把你的 webpack 配置添加到你的帖子中吗？

我添加了一个链接。

是不是因为 HtmlWebpackPlugin 会将所有的块注入到索引模板中？