Webpack学习笔记(4)

1.缓存

可以通过命中缓存降低网络流量,是网站加站速度更快。

然而在部署新版本时,不更改资源的文件名,浏览器可能认为你没有更新,所以会使用缓存版本。

由于缓存存在,获取新的代码成为问题。

接下来将配置webpack使得生成的文件会被缓存,并且变化时又能请求到新的文件。

如果文件内容改变了,文件名没变,浏览器会使用缓存,所以通过修改output的filename可以实现根据文件内容变化同时修改文件名。

在webpack.config.js修改filename配置:

2.缓存第三方库

将第三方库(如loadsh等)打包缓存到浏览器,自己的代码发生变化时才去更新,第三方代码始终使用缓存,所以就配置单独打包第三方库缓存到浏览器,利用client的长效缓存机制,命中缓存来消除请求,并减少向server获取资源,保证client代码和server代码版本一致。下面来举例实现

第三方库的特点是都在node_modules文件夹下。

在webpack.config.js配置splitChunks:

可以看到第三方库被打包为一个vendors.xxx.js文件:

将js文件放到单独的scripts文件夹下,修改一下出口文件filename即可:

相关推荐
西岸行者8 小时前
学习笔记:SKILLS 能帮助更好的vibe coding
笔记·学习
悠哉悠哉愿意9 小时前
【单片机学习笔记】串口、超声波、NE555的同时使用
笔记·单片机·学习
别催小唐敲代码10 小时前
嵌入式学习路线
学习
毛小茛12 小时前
计算机系统概论——校验码
学习
babe小鑫12 小时前
大专经济信息管理专业学习数据分析的必要性
学习·数据挖掘·数据分析
winfreedoms13 小时前
ROS2知识大白话
笔记·学习·ros2
在这habit之下13 小时前
Linux Virtual Server(LVS)学习总结
linux·学习·lvs
我想我不够好。13 小时前
2026.2.25监控学习
学习
im_AMBER13 小时前
Leetcode 127 删除有序数组中的重复项 | 删除有序数组中的重复项 II
数据结构·学习·算法·leetcode
CodeJourney_J13 小时前
从“Hello World“ 开始 C++
c语言·c++·学习