webpack4和webpack5区别3---缓存

webpack4缓存

使用打包的目的是提升项目启动速度,提升开发体验,webpack的打包方式就是把项目内全部文件都走一遍loader和babel处理,所以项目文件内容越来越多,启动的时间就越来越长,随随便便就 run 一分钟。

webpack4 使用 hard-source-webpack-plugin

javascript 复制代码
module.exports = {
  plugins: [
    new HardSourceWebpackPlugin({
        cacheDirectory: './jenson/[confighash]', // 修改打包目录 dist/jenson
        // 自动清除配置
        cachePrune: {
          // 存储天数 10 day
          maxAge: 10 * 24 * 60 * 60 * 1000,
          // 最大存储 1G
          sizeThreshold: 1 * 1024 * 1024 * 1024,
        }
    })
  ],
}

webpack5缓存

cache 类型设置为内存或者文件系统。memory 选项很简单,它告诉 webpack 在内存中存储缓存,不允许额外的配置

Cache | webpack 中文文档

javascript 复制代码
module.exports = {
  cache: {
    type: 'filesystem',
    allowCollectingMemory: true,
  },
};
相关推荐
Anastasiozzzz6 分钟前
阿亮随手记:动态条件生成Bean
java·前端·数据库
mclwh44 分钟前
关于React-Konva 报:Text components are not supported....错误的问题
前端·react.js
SuperEugene1 小时前
错误处理与 try/catch:真实项目里应该捕什么错?
前端·javascript·面试
Amumu121382 小时前
CSS引入方式
前端·css
我是Superman丶2 小时前
【Demo】✋ 数字手势识别 Html
前端·html
HelloReader2 小时前
Leptos + Tauri 2 前端配置Trunk + SSG + 移动端热重载一次打通(Leptos 0.6 口径)
前端
HelloReader2 小时前
Next.js + Tauri 2 用 Static Export 把 React 元框架装进桌面/移动端
前端
Wect3 小时前
从输入URL到页面显示的完整技术流程
前端·面试·浏览器
没有bug.的程序员3 小时前
自动化测试之魂:Selenium 与 TestNG 深度集成内核、Page Object 模型实战与 Web UI 交付质量指南
前端·自动化测试·selenium·ui·testng·page·object
夕除3 小时前
js--22
前端·javascript·python