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

相关推荐
艾莉丝努力练剑13 分钟前
【C/C++】形参、实参相关内容整理
c语言·开发语言·c++·学习
@国境以南,太阳以西1 小时前
快速准确的千兆像素病理图像分类,采用分层蒸馏多实例学习(每日一文)
学习
前端缘梦1 小时前
解锁webpack核心技能(三):从源代码到打包产物编译过程的原理指南
webpack·编译原理·前端工程化
Fuliy961 小时前
【数字图像处理系列笔记】Ch03:图像的变换
图像处理·人工智能·笔记·学习·计算机视觉·数字图像处理
Charles Wesley8 小时前
11:java学习笔记:1D array(1维数组)
java·笔记·学习·eclipse
sakabu12 小时前
cJSON库应用
c语言·笔记·学习
Asu520213 小时前
思途Mybatis学习 0805
java·spring boot·学习·mybatis
大阳12313 小时前
数据结构2.(双向链表,循环链表及内核链表)
c语言·开发语言·数据结构·学习·算法·链表·嵌入式
Jet_closer_burning14 小时前
前端项目工程化配置webpack与vite
前端·webpack·node.js
Olrookie15 小时前
若依前后端分离版学习笔记(五)——Spring Boot简介与Spring Security
笔记·后端·学习·spring·ruoyi