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,
  },
};
相关推荐
高端章鱼哥几秒前
Python 项目快速部署到 Linux 服务器基础教程
前端
李剑一2 分钟前
前端使用Web Cryptography API进行内容加密,几乎无法破解
前端
搬砖码2 分钟前
优雅实现!自定义滚动刻度选择器,精准选择无压力
前端
盏茶作酒292 分钟前
打造自己的组件库(二)CSS工程化方案
前端
mwq301234 分钟前
AI编程工具:Claude Code安装和使用
前端·claude
gnip20 分钟前
项目开发流程之技术调用流程
前端·javascript
转转技术团队33 分钟前
多代理混战?用 PAC(Proxy Auto-Config) 优雅切换代理场景
前端·后端·面试
南囝coding35 分钟前
这几个 Vibe Coding 经验,真的建议学!
前端·后端
gnip1 小时前
SSE技术介绍
前端·javascript
yinke小琪1 小时前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript