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,
  },
};
相关推荐
大怪v11 小时前
AI抢饭?前端佬:我要验牌!
前端·人工智能·程序员
新酱爱学习11 小时前
字节外包一年,我的技术成长之路
前端·程序员·年终总结
小兵张健11 小时前
开源 playwright-pool 会话池来了
前端·javascript·github
IT_陈寒14 小时前
Python开发者必知的5大性能陷阱:90%的人都踩过的坑!
前端·人工智能·后端
codingWhat15 小时前
介绍一个手势识别库——AlloyFinger
前端·javascript·vue.js
代码老中医15 小时前
2026年CSS彻底疯了:这6个新特性让我删掉了三分之一JS代码
前端
不会敲代码115 小时前
Zustand:轻量级状态管理,从入门到实践
前端·typescript
踩着两条虫15 小时前
VTJ.PRO 双向代码转换原理揭秘
前端·vue.js·人工智能
扉川川15 小时前
OpenClaw 架构解析:一个生产级 AI Agent 是如何设计的
前端·人工智能
远山枫谷15 小时前
一文理清页面/组件通信与 Store 全局状态管理
前端·微信小程序