如何在 angular 中更改 chunk.js 名称 4 延迟加载

Question

我在angular 4 中实现了延迟加载模块。它运行良好。当我导航到新页面时，它将加载额外的 js 文件，例如： 0.chunk.js, 1.chunk.js.

我的问题是：如何更改该块名称？前任： 1.chunk.js => about.js 0.chunk.js => user.js

Answer 1

我假设您正在使用 Webpack 进行构建 Angular。

在 webpack.config 中我们有一个配置属性 "output"。

更改为（例如）：

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

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

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

希望对您有所帮助。

P/s：我认为 angular-cli 中也有此配置

Answer 2

到目前为止，我知道如何命名延迟加载块的唯一方法是使用 Angular CLI 之外的 webpack 配置和 angular-router-loader 包：

https://github.com/brandonroberts/angular-router-loader/blob/master/docs/options.md#lazy-loading-options

这是 webpack.config.js 文件中的加载器示例

{
    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

Answer 3

将@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。所以，你很高兴去！

如何在 angular 中更改 chunk.js 名称 4 延迟加载

How to change chunk.js name in angular 4 lazy loading

lazy-loading

webpack

angular