webpack优化篇(四十六):充分利用缓存提升二次构建速度

简介: webpack优化篇(四十六):充分利用缓存提升二次构建速度

说明

玩转 webpack 学习笔记



缓存

目的:提升二次构建速度


缓存思路:

  • babel-loader 开启缓存
  • terser-webpack-plugin 开启缓存
  • 使用 cache-loader 或者 hard-source-webpack-plugin



实战


先不开启 babel-loader 缓存

6d0eb45d7a8c4e75bd7583e30d543088.png

运行 npm run build

c3697cb457654021ae791ffce369cc02.png




开启 babel-loader 缓存

new HappyPack({
    // 3) re-add the loaders you replaced above in #1:
    loaders: ['babel-loader?cacheDirectory=true']
})


第一运行 npm run build 之后,.cache 目录下会生成一个 babel-loader 的文件夹

b5a85488df2e4111af74e6ea5d5628c7.png


当我们再次运行的时候:发现还有有点效果,这个还是跟模块有关,越多效果越明显

63fe390b121b42c4bd161fb4cc353fef.png


开启 terser-webpack-plugin 开启缓存

optimization: {
    minimizer: [
        new TerserPlugin({
            parallel: true,
            cache: true
        }),
    ],
},


运行之后 npm run build 之后,.cache 目录下会生成一个 terser-webpack-plugin 的文件夹


06577034e63b42568ef389a323bc6f40.png


我们可以看一下打包效果:可以看到提升的效果还是很明显的


c4c30e7b7d8b44509c5ef52dcf7149ab.png


使用 hard-source-webpack-plugin 插件

github:https://github.com/mzgoddard/hard-source-webpack-plugin

a7ff73d7865543fda55ac0fd305f6455.png


先安装依赖:

npm install --save-dev hard-source-webpack-plugin


a4a061b31c3e4c7ca1c68788cc34fcb8.png


使用插件:


const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
plugins: [
  new HardSourceWebpackPlugin()
]


运行 npm run build 之后,.cache 目录下会生成一个 hard-source 的文件夹

b994550c6dfd446891a2dbb876b254c4.png


我们可以发现速度很快。

2ff4d2e3ff3447e19077992b78e99941.png

目录
相关文章
|
1月前
|
缓存 前端开发 JavaScript
Webpack与Babel的进阶配置与优化
通过以上的进阶配置和优化策略,可以更好地发挥`Webpack`与`Babel`的功能,提高项目的性能和开发效率。
|
1月前
|
缓存 监控 前端开发
在资源加载优化中,如何利用浏览器缓存提升性能?
通过以上这些方法,可以有效地利用浏览器缓存来提升资源加载的性能,减少网络请求次数,提高用户体验和应用的响应速度。同时,需要根据具体的应用场景和资源特点进行灵活调整和优化,以达到最佳的效果。此外,随着技术的不断发展和变化,还需要持续关注和学习新的缓存优化方法和策略。
91 53
|
1月前
|
缓存 NoSQL 数据库
运用云数据库 Tair 构建缓存为应用提速,完成任务得苹果音响、充电套装等好礼!
本活动将带大家了解云数据库 Tair(兼容 Redis),通过体验构建缓存以提速应用,完成任务,即可领取罗马仕安卓充电套装,限量1000个,先到先得。邀请好友共同参与活动,还可赢取苹果 HomePod mini、小米蓝牙耳机等精美好礼!
|
1月前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
58 6
|
1月前
|
缓存 监控 测试技术
如何利用浏览器的缓存来优化网站性能?
【10月更文挑战第23天】通过以上多种方法合理利用浏览器缓存,可以显著提高网站的性能,减少网络请求,加快资源加载速度,提升用户的访问体验。同时,要根据网站的具体情况和资源的特点,不断优化和调整缓存策略,以适应不断变化的业务需求和用户访问模式。
98 7
|
1月前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
75 7
|
1月前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
51 2
|
1月前
|
缓存 监控 安全
检测 Webpack 5 持久化缓存是否存在安全漏洞
【10月更文挑战第23天】通过全面、系统地检测和评估,能够及时发现 Webpack 5 持久化缓存的安全漏洞,并采取有效的措施进行修复,保障项目的安全稳定运行。同时,要持续关注安全技术的发展和变化,不断提升安全检测能力,以应对日益复杂的安全挑战。
|
1月前
|
存储 缓存 监控
配置 Webpack 5 持久化缓存时需要注意哪些安全问题?
【10月更文挑战第23天】通过全面、系统地分析和应对安全问题,能够更好地保障 Webpack 5 持久化缓存的安全,为项目的成功构建和运行提供坚实的安全基础。同时,要保持对安全技术的关注和学习,不断提升安全防范能力,以应对日益复杂的安全挑战。
|
1月前
|
存储 缓存 前端开发
利用 Webpack 5 的持久化缓存来提高构建效率
【10月更文挑战第23天】利用 Webpack 5 的持久化缓存是提高构建效率的有效手段。通过合理的配置和管理,我们可以充分发挥缓存的优势,为项目的构建和开发带来更大的便利和效率提升。你可以根据项目的实际情况,结合以上步骤和方法,进一步优化和完善利用持久化缓存的策略,以达到最佳的构建效果。同时,不断探索和实践新的方法和技术,以适应不断变化的前端开发环境和需求。