Webpack 长期缓存 [英] Webpack long term caching
问题描述
场景
我正在尝试使用 webpack 将我的供应商脚本与我的应用程序脚本分开捆绑.
尝试 1
index.js
var _ = require('lodash');控制台日志(_)webpack.config.js
var path = require('path');var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');变量配置 = {入口: {供应商:['lodash']，应用程序:'./index.js'},输出: {路径:path.resolve(__dirname, 'dist'),文件名:'[名称].[chunkhash].js'},插件: [新的 webpack.optimize.CommonsChunkPlugin({名称:供应商"，minChunks:无穷大，}),新的 HtmlWebpackPlugin({文件名:'index.html',注入:真实})]};module.exports = config;结果
<块引用> 资产大小块块名称app.3437c5da57e0c6671675.js 145 字节 0 [emitted] appvendor.72c95e21a8d7096d53bc.js 428 kB 1 [发出] 供应商index.html 232 字节 [发出]现在如果我对 index.js
index.js
var _ = require('lodash');console.log('更改索引');控制台日志(_)结果
<块引用> 资产大小块块名称app.c724350371b50a9afeb2.js 177 字节 0 [emitted] appvendor.0e76f9c86cbe02606265.js 428 kB 1 [emitted] 供应商index.html 232 字节 [发出]即使我只更新了索引文件，两个哈希值也会发生变化.
两个供应商文件的区别是
vendor.72c95e21a8d7096d53bc.js
script.src = __webpack_require__.p + "" + chunkId + "."+ ({"0":"app"}[chunkId]||chunkId) + "."+ {"0":"3437c5da57e0c6671675"}[chunkId] + ".js";
vendor.0e76f9c86cbe02606265.js
script.src = __webpack_require__.p + "" + chunkId + "."+ ({"0":"app"}[chunkId]||chunkId) + "."+ {"0":"c724350371b50a9afeb2"}[chunkId] + ".js";
尝试 2
在做了一些研究之后，我找到了下面的文章，它解释了 webpack 生成一个包含放置在入口块中的块标识符的卡盘清单.这解释了上面的差异.解决方案是将卡盘清单提取到一个单独的文件中.
https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95
index.js
var _ = require('lodash');控制台日志(_)webpack.config.js
var path = require('path');var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');变量配置 = {入口: {供应商:['lodash']，应用程序:'./index.js'},输出: {路径:path.resolve(__dirname, 'dist'),文件名:'[名称].[chunkhash].js'},插件: [新的 webpack.optimize.CommonsChunkPlugin({名称:供应商"，minChunks:无穷大，}),新的 ChunkManifestPlugin({文件名:manifest.json"，manifestVariable: "webpackManifest"}),新的 HtmlWebpackPlugin({文件名:'index.html',注入:真实})]};module.exports = config;结果
<块引用> 资产大小块块名称app.3437c5da57e0c6671675.js 145 字节 0 [emitted] appmanifest.json 35 字节 [发出]vendor.72c95e21a8d7096d53bc.js 428 kB 1 [发出] 供应商现在如果我对 index.js
index.js
var _ = require('lodash');console.log('更改索引');控制台日志(_)结果
<块引用> 资产大小块块名称app.c724350371b50a9afeb2.js 177 字节 0 [emitted] appmanifest.json 35 字节 [发出]vendor.0e76f9c86cbe02606265.js 428 kB 1 [emitted] 供应商即使我只更新了索引文件，两个哈希值再次发生了变化.
然而，这一次，两个供应商文件之间没有区别
问题
是否有上述情况不起作用的原因，或者我是否从根本上错误地解决了这个问题.
webpack 是否有更简单的方法来实现我想要做的事情，因为即使我完成了上述步骤，我也必须阅读清单，然后将其注入到我的 index.html 页面中?
似乎是最新的 webpack 版本有问题，请查看 open issue https://github.com/webpack/webpack/issues/1315
所以现在你不能依赖 [chunkhash]，最简单的解决方案是使用自定义哈希，比如 <script src="vendor.js?v=001">，并在每次发布时在后端更改它.
Scenario
I'm attempting to use webpack to bundle my vendor scripts separately from my application scripts.
Attempt 1
index.js
var _ = require('lodash');
console.log(_)
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
entry: {
vendor: ['lodash'],
app: './index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: Infinity,
}),
new HtmlWebpackPlugin({
filename: 'index.html',
inject: true
})
]
};
module.exports = config;
results
Asset Size Chunks Chunk Names app.3437c5da57e0c6671675.js 145 bytes 0 [emitted] app vendor.72c95e21a8d7096d53bc.js 428 kB 1 [emitted] vendor index.html 232 bytes [emitted]
Now if I make a change to index.js
index.js
var _ = require('lodash');
console.log('changed index');
console.log(_)
results
Asset Size Chunks Chunk Names app.c724350371b50a9afeb2.js 177 bytes 0 [emitted] app vendor.0e76f9c86cbe02606265.js 428 kB 1 [emitted] vendor index.html 232 bytes [emitted]
Both hashes change even though I only updated the index file.
The difference between the two vendor files is
vendor.72c95e21a8d7096d53bc.js
script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"app"}[chunkId]||chunkId) + "." + {"0":"3437c5da57e0c6671675"}[chunkId] + ".js";
vendor.0e76f9c86cbe02606265.js
script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"app"}[chunkId]||chunkId) + "." + {"0":"c724350371b50a9afeb2"}[chunkId] + ".js";
Attempt 2
After doing some research I found the article below which explains that webpack generates a chuck manifest that contains the chunk identifiers which is placed in the entry chunk. This explains the diff above. The solution is to extract the chuck manifest to a seperate file.
https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95
index.js
var _ = require('lodash');
console.log(_)
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
var config = {
entry: {
vendor: ['lodash'],
app: './index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: Infinity,
}),
new ChunkManifestPlugin({
filename: "manifest.json",
manifestVariable: "webpackManifest"
}),
new HtmlWebpackPlugin({
filename: 'index.html',
inject: true
})
]
};
module.exports = config;
results
Asset Size Chunks Chunk Names app.3437c5da57e0c6671675.js 145 bytes 0 [emitted] app manifest.json 35 bytes [emitted] vendor.72c95e21a8d7096d53bc.js 428 kB 1 [emitted] vendor
Now if I make a change to index.js
index.js
var _ = require('lodash');
console.log('changed index');
console.log(_)
results
Asset Size Chunks Chunk Names app.c724350371b50a9afeb2.js 177 bytes 0 [emitted] app manifest.json 35 bytes [emitted] vendor.0e76f9c86cbe02606265.js 428 kB 1 [emitted] vendor
Once again both hashes change even though I only updated the index file.
This time however, there are no differences between the two vendor files
Questions
Is there a reason why the above scenario is not working or am I fundamentally approaching this problem incorrectly.
Is there is an easier way with webpack to achieve what I'm trying to do, because even if I get the step above working, I'll have to read the manifest and then inject it into my index.html page?
It seems to be a problem with latest webpack version, please see open issue https://github.com/webpack/webpack/issues/1315
So for now you can't rely on [chunkhash], simplest solution is to use custom hash, something like <script src="vendor.js?v=001">, and change it on backend every time when you releasing.
这篇关于Webpack 长期缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
