在 Webpack 之前,我总是依赖以下模式来进行“缓存清除”:
<script src="foo.js?cacheBust=12345" />
其中 12345
是服务器在每次构建时为我生成的 token (它可能是 Git 哈希,但在我的情况下不是)。
通过 Webpack,我现在有两个文件:build.js
和 chunk.1.js
。由于我使用普通脚本标记引入第一个,因此我可以使用上面的模式:
<script src="build.js?cacheBust=12345" />
但是,此时 build.js
会去获取 chunk.1.js
,并且当它获取时,它不包含缓存清除后缀。
我希望 Webpack 自动附加 ?cacheBust=12345
,但我在构建时不知道 12345
部分,所以我无法包含它在我的 webpack.config
中。相反,我必须等到 HTML 页面被评估,此时我从服务器获取 token 。
所以,我的问题是,有没有办法让 Webpack 查看用于获取初始文件的参数(例如 ?cacheBust=12345
),并在获取其他文件时附加相同的参数?
最佳答案
如果您想以“webpack
方式”实现缓存清除:
1。输出文件的哈希名称
将输出文件名更改为哈希生成的名称(在构建阶段)
output: {
path: '/',
filename: '[hash].js',
chunkFilename: '[chunkhash].js',
},
从那时起,您的 foo.js
和 chunk.1.js
将被称为 e883ce503b831d4dde09.js
和 f900ab84da3ad9bd39cc。 js
。值得一提的是,该文件的生成通常与生产和时间更新 cacheBust
值有关。
2。如何包含未知名称的文件?
从现在起,您的 foo.js
- 主文件以未知的方式命名。要提取该文件名,您可以使用 AssetsPlugin
const AssetsPlugin = require('assets-webpack-plugin');
const assetsPluginInstance = new AssetsPlugin();
并将此插件添加到webpack.config.js
plugins: [
assetsPluginInstance
]
在 webpack-assets.json
文件中,您应该看到类似的内容
{
"main": {
"js": "/e883ce503b831d4dde09.js"
}
}
您可以使用此文件指向主 .js
文件。欲了解更多详细信息,请阅读this answer
3。受益时间
我猜想,如果您因修改 chunk.2.js
文件而制作应用程序,您会更改文件路径
- build.js?cacheBust=12345
- chunk.1.js?cacheBust=12345
- chunk.2.js?cacheBust=12345
- chunk.2.js?cacheBust=12345
新人
- build.js?cacheBust=12346 // modified referation to chunk.2.js file
- chunk.1.js?cacheBust=12346
- chunk.2.js?cacheBust=12346 // modified
- chunk.2.js?cacheBust=12346
如果您使用上述解决方案,您将获得免费缓存确定。现在 filles 将被称为
(之前的作品)
- e883ce503b831d4dde09.js
- f900ab84da3ad9bd39cc.js
- 5015cc82c7831915903f.js
- 8b6de52a46dd942a63a7.js
(新作品)
- c56322911935a8c9af13.js // modified referation to chunk.2.js file
- f900ab84da3ad9bd39cc.js
- cd2229826373edd7f3bc.js // modified
- 8b6de52a46dd942a63a7.js
现在仅 main file
和 chunk.2.js
名称发生变化,您将通过 webpack 方式免费获得它。
您可以在此处阅读有关长期缓存的更多信息 https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31
关于javascript - 如何在 Webpack 中使用缓存清除?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39238163/