如何在Angular 4懒加载中更改chunk.js文件名

Question

我在 Angular 4 中实现了 lazy loading 模块，它能够很好地工作。当我导航到新页面时，它将加载额外的 JS 文件，例如：0.chunk.js、1.chunk.js。

我的问题是：如何更改这些 chunk 名称呢？ 例如： 1.chunk.js => about.js 0.chunk.js => user.js

- Kouipheng LEE

---

你使用 require.ensure 还是 import？请给我们提供一些代码示例。 - Everettss

嗨@Everettss，你可以前往此Github [repo]（https://github.com/leepheng/angular-lazyload-basic）获取源代码。 - Kouipheng LEE

Answer 1

目前我所知道的命名惰性加载块的唯一方法是使用位于 Angular CLI 外部的 webpack 配置和 angular-router-loader 包。

以下是 webpack.config.js 文件中 loader 的示例。 https://github.com/brandonroberts/angular-router-loader/blob/master/docs/options.md#lazy-loading-options

{
    test: /\.ts$/,
    loaders: [
      {
          loader: 'awesome-typescript-loader',
          options: { configFileName: helpers.root('src', 'tsconfig.json')
      }
      },  
      'angular-router-loader',
      'angular2-template-loader'
    ]
}

然后路由路径应该像这样配置：

{
  path: 'lazy',
  loadChildren './lazy.module#LazyModule?chunkName=MyChunk'
}

我已经等了一段时间，希望这个功能能够被加入到angular cli中。以下是问题链接：https://github.com/angular/angular-cli/issues/5171

- PEsteves

---

对于那些只是浏览的人，对我来说答案是在惰性加载路由上使用 '?chunkName=MyChunk'。 - Seth

Answer 2

将 @angular/cli 更新到 1.3.0-beta 版本。它会自动为您的懒加载块提供名称，如 your-lazy-loading.module.chunk.js。我所需要做的就是运行 npm install -g @angular/cli@1.3.0-beta.1 命令并更新 package.json 文件，如下：

devDependencies": {
    "@angular/cli": "1.3.0-beta.1", 
...
}

最后，运行npm install。这样，您就可以开始了！

- bradd

Answer 3

我假设你正在使用Webpack来构建Angular。

在webpack.config中，我们有一个名为“output”的配置属性。

将其更改为（例如）：

const DistDirectory = path.resolve(__dirname, '../dist');

...,
output: {
   path: DistDirectory,
   filename: '[name].[hash].bundle.js'
}

在这种情况下，我们的结果将会是这样的： 0.89872d7bedaacc90c95a.bundle.js

希望它有所帮助。

附言：我认为你也可以在angular-cli中找到这个配置。

- Thien Hoang