Webpack5之babel缓存以及文件资源缓存

最新推荐文章于 2024-04-27 15:00:00 发布

Wscthhh

最新推荐文章于 2024-04-27 15:00:00 发布

阅读量1.8k

点赞数

文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/weixin_43714543/article/details/121540286

版权

本文探讨了浏览器的缓存机制，包括强制缓存和协商缓存，重点讲解了强制缓存中的Cache-Control规则。接着，讨论了Webpack打包时如何处理文件资源缓存，推荐使用contenthash避免全量更新。最后，解析了babel-loader的cacheDirectory缓存原理，提高构建速度。

摘要由CSDN通过智能技术生成

要说文件资源缓存那就得先了解一下浏览器的缓存机制

浏览器大概可以分为强制缓存（强缓存）和协商缓存

浏览器每次与服务器通信的方式为应答模式，即：浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中，简单的过程图如下：

由上图我们可以知道：

浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

这里我们来着重说一下强制缓存

强制缓存

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Wscthhh

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

webpack5 使用cache对Eslint和Babel缓存提升打包构建速度

周家大小姐

11-17

1156

babel-loader | webpack 中文文档webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。

webapck5 缓存

qq_46433453的博客

12-15

803

缓存作用：让打包的构建速度更快语法： module.exports = { cache:{ // 全体缓存 type: 'filesystem',//必设置项 cacheDirectory: path.resolve(__dirname, '.temp_cache'), //将缓存存在 .temp_cache中 } } 问题：浏览器总是获取上一次缓存，不能获取新的缓存。文件资源缓存： new miniCssExtractPlugin({

参与评论您还未登录，请先登录后发表或查看评论

Webpack5文件资源缓存

最新发布

qq_42264976的博客

04-27

761

要说文件资源缓存那就得先了解一下浏览器的缓存机制浏览器大概可以分为强制缓存（强缓存）和协商缓存浏览器每次与服务器通信的方式为应答模式，即：浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入中，简单的过程图如下：浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中。

Webpack5学习笔记（基础篇九）——缓存

MRlaochen的博客

01-11

1192

通常，我们使用webpack来打包我们的模块化后的应用程序，webpack 会生成一个可部署的/dist目录，然后把打包后的内容放置在此目录中。只要/dist目录中的内容部署到server上，client (通常是浏览器)就能够访问此server的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为缓存的技术。可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于

webpack的缓存

sendudu的博客

11-09

348

一、babel缓存 1. 引入问题为什么对Babel进行缓存，因为项目里js代码一般最多，而babel是对js代码进行编译处理成浏览器能识别的语法 100个js模块中只有1个变化，另外99个不需要再重新编译 2. 解决方案开启Babel 缓存第二次构建时才会读取缓存，速度会更快一些 3. 具体配置 { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { pr...

webpack独立打包和缓存处理详解

12-11

Webpack 是一个流行的模块打包工具，它能够将 JavaScript 模块化代码和其他资源（如 CSS、图片等）转换成浏览器可理解的格式。在本篇文章中，我们将深入探讨如何使用 Webpack 进行独立打包和缓存处理，以提高项目的...

【webpack5修行之道】第10篇：性能优化-缓存

j178202798的博客

06-17

455

上一篇： webpack.config.js const { CleanWebpackPlugin } = require('clean-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const { resolve } = require('path') process.env.NODE_ENV = 'development' module.exports = { mode: 'developm

webpack4性能优化小结——HMR、source-map、oneOf、babel缓存、多进程打包、文件缓存、tree shaking、code split、dll、pwa、externals

猛猛的博客

01-16

988

webpack性能优化：开发环境性能优化 1）优化打包构建速度 —— HMR 2）优化代码调试—— source-map 生产环境性能优化 1）优化打包构建速度——oneOf、babel缓存、多进程打包 2）优化代码运行的性能——文件缓存、tree shaking、code split、dll、懒加载和预加载、pwa、externals 开发环境配置–优化打包构建的速度使用HMR（hot module repalcement），热模块替换，作用是一个模块发生改变，只会重新打包这个模块，而不是全部更

webpack-multiple:webpack5 多页面脚手架

05-09

Webpack 5 是一款强大的模块打包工具，它能够将 JavaScript、CSS、图片等静态资源转换成浏览器可以识别的格式。在开发大型多页面应用时，合理地配置和使用 Webpack 可以极大地提高工作效率。本教程将围绕 "webpack-...

webpack5浏览器兼容详解:babel-loader, core-js,plugin-transform-runtime

luxiaoyuan2011的博客

08-24

1547

webpack5浏览器兼容详解:babel-loader, core-js,plugin-transform-runtime， @babel/plugin-proposal-object-rest-spread， @babel/plugin-proposal-class-properties

webpack5 基础配置（6）深入解析Babel以及在webpack的使用

lin_fightin的博客

03-29

2373

上一章说到了babel-cli来帮助我们编译文件，但是真实开发中都是通过webapck配置，一次性全部打包完成的。但我们现在没有配置webpack的基础下来Build一下。可以看到bundle.js文件中，webpack只是帮我们实现了一个函数作用域，而没有转换es6的代码。如果想转成es5，就要通过配置了。 babel是一个工具，功能很少，但能通过插件如@babel/preset-env来壮大其功能。如果只有一个babel-loader时，是不能正确转化es5的。必须借助插件。使用了@babel

webpack5配置babel

qq_45770253的博客

07-21

1987

webpack5配置babel 先安装 babel-loader babel-loader npm install -D babel-loader @babel/core @babel/preset-env // 根据实际的版本去官网下载配置webpack.config.js文件 module.exports = { mode: "development", entry: "./src/main.js", output: { path: path.resolve(__di

15. webpack优化配置-babel缓存和资源缓存配置

草木红的博客

08-18

1279

开启babel缓存，在第二次打包时，打包构建速度更快在webpack配置文件webpack.config.js中开启babel缓存 module.exports = { ... module: { rules: [ ... //js兼容性处理 { test: /\.js$/, exclude: /node_modules/, loader: 'ba..

【总结】1211- webpack5持久化缓存实践

pingan8787

01-23

1323

作者：丁楠。我不生产代码，我是代码的搬运工。背景公司的云his静态项目代码量巨大，依赖的npm包大概有100个，打包一次大概要14分钟自研的hammer工具的本地打包虽然能提升部署时间，但...

webpack生产环境性能优化打包构建速度-babel缓存+服务资源缓存

mus-z的博客

07-30

585

对babel缓存、对资源缓存对于js代码的编译处理，我们每次构建之后，只想变动我们修改的文件模块，这时候不能依赖于HMR的dev-server，所以要对babel进行缓存操作只需要在babel-loader中的options中开启cacheDirectory:true 想要看出区别要在根目录下新家server.js配置服务器代码 const express = require("express"); const app = express(); app.use(express.static("bui.

webpack5持久化缓存实践

油墨香^-^的博客

02-15

480

node版本提升 8.x -> 12.x利用webpack5的持久化缓存提升构建效率速度大幅度提升，快了7倍。使用基于rust开发的swc替代babel，测试的构建速度提升一分钟半左右，因生态不成熟，不能上生产。

学习webpack(五)：babel的介绍和基本使用

copyer_xyf的博客

08-18

613

每天对自己多问几个为什么，总是有着想象不到的收获。一个菜鸟小白的成长之路（copyer）为什么需要babel 在前端中有着很多的新语法，比如： ES6， TS，JSX等，他们都需要babel的转化所以，学习Babel对于我们理解代码从编写到线上的转变过程至关重要 babel到底是什么呢 Babel是一个工具链，主要运用于旧浏览器或者环境中将ES6代码转换为向后兼容版本的JavaScript 包括：语法转换，源代码转换等 Babel的命令式使用 babel本身.

webpack与强缓存

qq_50646256的博客

09-12

200

当服务端开始强缓存的时候, 只要文件名字不变化, 那么就不会对比文件内容, 会直接走缓存但是这种情况下, 文件内容发生变化的时候, 不能进行及时更新此时可以利用hash值让每次更改后的文件名根据hash变化来达到不走缓存的效果 hash: webpack每次打包都会生成一个唯一的hash值, css, js, 图片等文件可以使用该值作为名称达到每次webpack打包后都更新为新的资源。但是缺点就是其他没有更新的资源也会被重新命名重新加载, 造成不必要的资源浪费, 不可取 chunkhash: 从