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即可:

相关推荐
Shannon Law7 小时前
【免费下载】关于机器学习和深度学习的书籍
学习
Master_oid7 小时前
机器学习28:增强式学习(Deep Reinforcement Learn)③
人工智能·学习·机器学习
我命由我123457 小时前
开发中的英语积累 P25:Axis、Stroke、Corner、Interceptor、Declared、Internal
经验分享·笔记·学习·职场和发展·求职招聘·职场发展·学习方法
扑火的小飞蛾7 小时前
【Ansible学习笔记01】 批量执行 shell 命令
笔记·学习·ansible
d111111111d7 小时前
STM32 USART接收中断:如何判断数据接收完成?
stm32·单片机·嵌入式硬件·学习·模块测试
报错小能手7 小时前
线程池学习(一) 理解操作系统 进程 线程 协程及上下文切换
学习
pps-key7 小时前
麻雀AI:一个能自己学习交易的智能体
人工智能·学习
YangYang9YangYan7 小时前
2026年大专大数据与会计专业核心证书推荐
大数据·学习·数据分析
炽烈小老头7 小时前
【 每天学习一点算法 2026/01/04】打家劫舍
学习·算法
漏刻有时7 小时前
微信小程序学习实录13:网络PDF文件的下载、本地缓存、预览、保存及主动转发
网络·学习·微信小程序