关于webpack的文件打包分割,并防止js文件缓存

在使用Webpack打包项目时,需要在打包的文件中更新版本号,以便于版本管理和防止缓存。

可以通配置output方式实现,包括使用[contenthash]或[hash]占位符在输出文件名中生成基于内容变化的哈希值。

实现原理:

Webpack允许你在输出文件的名称中使用[contenthash]或者[hash]占位符,这些占位符会根据文件内容生成一个哈希值,当文件内容发生变化时,哈希值也会变化,从而实现版本控制。

在 vue.config.js中

javascript 复制代码
module.exports = {
	//使用outputDir 指定了输出目录
    outputDir: 'dist',
    configureWebpack: {
        output: {
        	path: path.resolve(__dirname, 'dist'),
            // 在 outputDir 的基础上,进一步指定文件名
            filename: '[name].[contenthash].js' 
        }
    }
};

配置完项目之后重启,查看项目是否正常运行。

如果出现报错为:

javascript 复制代码
Cannot use [chunkhash] or [contenthash] for chunk in '[name].[contenthash].js' (use [hash] instead)

则将[contenthash]修改为[hash]

javascript 复制代码
output: {
      path: path.resolve(__dirname, 'dist'),
      // 使用 [hash] 占位符,根据文件内容生成哈希值
      filename: '[name].[hash].js' 
   },

原因:

使用限制:[chunkhash] 和 [contenthash] 主要用于根据文件内容生成哈希值,以此来实现浏览器缓存的优化。在某些情况下,Webpack 没办法准确计算出文件内容的哈希值,像在动态导入模块或者某些特殊的代码分割场景中。

使用场景不匹配:当使用动态导入模块时,Webpack 可能无法确定每个代码块(chunk)的具体内容,所以不能使用 [chunkhash] 或者 [contenthash]。
解决方案:

使用 [hash] 替代:[hash] 是基于整个构建过程生成的哈希值,而不是基于单个文件内容。虽然它的粒度没有 [chunkhash] 和 [contenthash] 那么细,但在某些无法使用它们的场景下可以作为替代方案。

另外,更详细的配置可以配置 splitChunks项。

相关推荐
ikun778g30 分钟前
uniapp设置安全区
前端·javascript·vue.js·ui·uni-app
三月的一天1 小时前
React单位转换系统:设计灵活的单位系统与单位系统转换方案
前端·javascript·react.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 22 - Computed:缓存机制实现
javascript·vue.js
爱泡脚的鸡腿2 小时前
VUE移动端项目跟练2(简洁易懂)
前端·javascript·vue.js
古夕2 小时前
技术复盘文档:解决 `watchEffect` 导致的图片闪烁无限循环问题
前端·javascript·vue.js
拾缘2 小时前
esm和cmj混用报错分析
前端·javascript
古夕2 小时前
技术复盘文档:`resourceLogoUrl` 数据丢失问题分析与最终解决方案
前端·javascript·vue.js
高热度网3 小时前
从 Vercel 构建失败谈 Git 大小写敏感性问题:一个容易被忽视的跨平台陷阱
前端·javascript
青衫旧故3 小时前
Uniapp Vue2 Vue3常量保存及调用
前端·javascript·vue.js·uni-app
Terio_my3 小时前
JTCatch 缓存配置与使用
缓存