关于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项。

相关推荐
paopaokaka_luck30 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
程序员勋勋15 小时前
Redis的String数据类型底层实现
数据库·redis·缓存
SY_FC5 小时前
uniapp input 聚焦时键盘弹起滚动到对应的部分
javascript·vue.js·elementui
YouQian7725 小时前
(AC)缓存系统
算法·缓存
KNeeg_6 小时前
Spring循环依赖以及三个级别缓存
java·spring·缓存
lkf197116 小时前
商品中心—1.B端建品和C端缓存
开发语言·后端·缓存
渣渣盟7 小时前
JavaScript核心概念全解析
开发语言·javascript·es6
Carlos_sam7 小时前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录7 小时前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript