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

相关推荐
saadiya~9 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
百锦再10 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
_Johnny_10 小时前
Redis 升级操作指南:单机与主从模式
数据库·redis·缓存
不爱洗脚的小滕10 小时前
【Redis】三种缓存问题(穿透、击穿、双删)的 Golang 实践
redis·缓存·golang
提笔了无痕10 小时前
什么是Redis的缓存问题,以及如何解决
数据库·redis·后端·缓存·mybatis
lang2015092811 小时前
Spring Boot缓存机制全解析
spring boot·后端·缓存
瓜瓜怪兽亚11 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院11 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq77982334011 小时前
React组件完全指南
前端·javascript·react.js
EndingCoder11 小时前
MongoDB基础与Mongoose ODM
服务器·javascript·数据库·mongodb·中间件·node.js