在 webpack 2 中混合长期缓存和代码拆分
Mix long term caching and code splitting in webpack 2
我正在编写一个 javascript webapp,使用 webpack 2 作为模块打包器。
我需要的是一种混合长期缓存功能的方法 (https://webpack.js.org/guides/caching/) and code splitting (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
。
使用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 对于每个不更改 chunk 代码的应用程序构建都是相同的。这意味着如果您从不更改您的库,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',
}
我正在编写一个 javascript webapp,使用 webpack 2 作为模块打包器。
我需要的是一种混合长期缓存功能的方法 (https://webpack.js.org/guides/caching/) and code splitting (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
。
使用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 对于每个不更改 chunk 代码的应用程序构建都是相同的。这意味着如果您从不更改您的库,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',
}