在Webpack 2中混合长期缓存和代码拆分 [英] Mix long term caching and code splitting in webpack 2

问题描述

我正在使用webpack 2作为模块捆绑程序来编写javascript webapp。

I'm writing a javascript webapp using webpack 2 as module bundler.

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

What I need is a way to mix long term caching feature (https://webpack.js.org/guides/caching/) and code splitting (https://webpack.js.org/guides/code-splitting/).

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

I'm able to lazy load a vendor library (pixi.js in my case) using require.ensure but this cause a bundle creation including the lib. I'm also able to create cachable bundles, but I would like to create a bundle for long term caching and use it in lazy loaded part.

有可能吗？

编辑1

我添加了配置的某些部分，以进行更好的说明。

I add some parts of my config for a better explanation.

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。

I'm using the vendor bundle for external libraries needed at startup time, but the pixi.js is only needed in some cases, but I would like to be long term cached.

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

The bundling phase emit this 2 files (and many others):

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

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

their content is almost the same. The second one is created by the require.ensure but I would like the pixi.8ef3aeac142f1bf921bf.bundle.js was used.

推荐答案

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

Using require.ensure produce a different code chunk that will be built in a different file. The kind of cache you want to offer is about the naming policy you give to those bundles (and your server configuration of course).

您要查找的参数是 chunckFilename 。

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

如果您这样设置，则您将始终具有名为 0.chunk.js ， 1.chunk.js 等。

If you set it like this you will always have predeterminated chuncks named 0.chunk.js, 1.chunk.js, etc..

当然会对客户端造成问题，因此您需要按以下方式配置此参数：

Of course that can pose a problem for clients, so you would like to configure this parameter as follows:

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

在块名中添加 chunkhash 将使您 0.4c473bca1d7688737499.chunk.js ， 1.2cfbf4a9cc0e1f24ec2c.chunk.js 等类名。

Adding chunkhash to the name of your chunk will give you 0.4c473bca1d7688737499.chunk.js, 1.2cfbf4a9cc0e1f24ec2c.chunk.js, etc kind of chunk names.

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

The chunkhash is identical for each application build that doesn't change the chunck code. That means that if you never change your library, the chunkhash will never change, thus the user will never have to re-download that file again.

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

If you want to ensure the chunk to always have the same name, then you can specify the name on the require.ensure declaration:

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

一起使用捆绑包命名的方法相同：

I personally suggest the same approach for bundles naming:

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',
}

这篇关于在Webpack 2中混合长期缓存和代码拆分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！