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

相关推荐
西岭千秋雪_1 分钟前
Redis缓存架构实战
java·redis·笔记·学习·缓存·架构
islandzzzz10 分钟前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端11 分钟前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构
超人不会飛1 小时前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦1 小时前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想1 小时前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
The_cute_cat1 小时前
JavaScript的初步学习
开发语言·javascript·学习
海天胜景1 小时前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
烛阴1 小时前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
独立开阀者_FwtCoder1 小时前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github