webpack通过hash控制文件缓存

最新推荐文章于 2024-05-07 03:36:52 发布

原创最新推荐文章于 2024-05-07 03:36:52 发布 · 360 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨了Webpack中hash、chunkhash及contenthash的区别与应用场景，解析了这些hash机制如何帮助实现资源缓存与版本控制，同时提供了使用HashedModuleIdsPlugin和NamedModulesPlugin解决hash频繁变动问题的方案。

常用hash的种类

hash 每次编译都会改变

  output: {
        filename: '[name].[hash:8].js',
    },

chunkhash chunk文件的hash变动

  output: {
        path: path.resolve(__dirname, '../dist'),
        filename: '[name].[chunkhash].js',
    },

contenthash 使css的hash不会随着entry改变需配合插件mini-css-extract-plugin使用

  plugins: [
		 new MiniCssExtractPlugin({
	      filename: '[name].[contenthash:8].css'
		})
	]

兼容处理

使用chunkhash来output后，使用dll插件的时候, vendor.js文件的hash值每次打包都会发生变化

为什么发生变化呢

chunkhash依赖于runtime
webpack runtime由于entry对应的Id变化而发生了变化

如何解决这个问题呢

HashedModuleIdsPlugin

new webpack.optimize.CommonsChunkPlugin({  names: ['vendor', 'manifest'], minChunks: Infinity})
new webpack.HashedModuleIdsPlugin()

使用插件 HashedModuleIdsPlugin

NamedModulesPlugin

这个插件是根据chunk在项目的相对路径命名模块id，只要vendor中的模块在根目录下的路径不变，但是路径字符会导致文件大小剧增

plugins: [ 
	new webpack.NamedModulesPlugin(), 
	new webpack.optimize.CommonsChunkPlugin({  name: 'vendor'，  minChunks: Infinity })
]

参考文章：
https://sebastianblade.com/using-webpack-to-achieve-long-term-cache/#hash
https://juejin.im/entry/59b0dde46fb9a024844959a1/detail
https://www.cnblogs.com/tugenhua0707/p/9615822.html