1

我正在使用 webpack 2 作为模块捆绑器编写一个 javascript webapp。

我需要的是一种混合长期缓存功能（https://webpack.js.org/guides/caching/）和代码拆分（https://webpack.js.org/guides/code-splitting/）的方法。

我可以使用 require.ensure 延迟加载供应商库（在我的情况下为 pixi.js），但这会导致创建包含 lib 的包。我也可以创建可缓存的包，但我想创建一个用于长期缓存的包，并在延迟加载的部分中使用它。

可能吗？

编辑 1

我添加了我的配置的一些部分以获得更好的解释。

entry: {
  vendor: ['some', 'vendors', 'libs'],
  pixi: ['pixi.js'],
  main: ['babel-polyfill', './app/index.js'],
},
output: {
  [... other configuration]
  filename: '[name].[chunkhash].bundle.js',
  chunkFilename: '[name].[chunkhash].js'
},

我将供应商捆绑包用于启动时所需的外部库，但仅在某些情况下才需要 pixi.js，但我希望长期缓存。

捆绑阶段发出这 2 个文件（以及许多其他文件）：

pixi.8ef3aeac142f1bf921bf.bundle.js 6.9331d810904191781167.js

它们的内容几乎相同。第二个是由 require.ensure 创建的，但我希望pixi.8ef3aeac142f1bf921bf.bundle.js使用过。

4

1 回答 1

0

使用require.ensure生成将构建在不同文件中的不同代码块。您想要提供的缓存类型是关于您为这些捆绑包提供的命名策略（当然还有您的服务器配置）。

您要查找的参数是chunckFilename。

output: {
  chunkFilename: '[name].chunk.js',
}

如果您这样设置，您将始终拥有名为0.chunk.js,1.chunk.js等的预先确定的块。

当然，这可能会给客户端带来问题，因此您希望按如下方式配置此参数：

output: {
  chunkFilename: '[name].[chunkhash].chunk.js',
}

将chunkhash添加到您的块名称中将为您提供0.4c473bca1d7688737499.chunk.js,1.2cfbf4a9cc0e1f24ec2c.chunk.js等类型的块名称。

对于不更改块代码的每个应用程序构建，块哈希都是相同的。这意味着如果您从不更改您的库，则 chunkhash 将永远不会更改，因此用户将永远不必再次重新下载该文件。

如果要确保块始终具有相同的名称，则可以在require.ensure声明中指定名称：

require.ensure([], function(require){
  var pixi = require('pixi');
  // ...
}, "pixi"); // this will be passed webpack template under [name] and can be used with chunkFilename

我个人建议使用相同的方法来命名包：

output: {
  /**
   * Specifies the name of each output file on disk.
   * IMPORTANT: You must not specify an absolute path here!
   *
   * See: https://webpack.js.org/configuration/output/#output-filename
   */
  filename: '[name].[hash].bundle.js',

  /** The filename of non-entry chunks as relative path
   * inside the output.path directory.
   *
   * See: https://webpack.js.org/concepts/output/#output-chunkfilename
   */
  chunkFilename: '[name].[chunkhash].chunk.js',
}
于 2017-03-16T09:35:00.317 回答