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,
  },
};
相关推荐
炸炸鱼.4 分钟前
LVS-DR 群集部署
前端·chrome·lvs
Ava的硅谷新视界6 分钟前
TypeScript 中用判别联合类型替代 instanceof 检查
前端·javascript·typescript
ZC跨境爬虫9 分钟前
海南大学交友平台开发实战 day9(头像上传存入 SQLite+BLOB 存储 + 前后端联调避坑全记录)
前端·数据库·python·sqlite
落魄江湖行25 分钟前
基础篇六 Nuxt4 状态管理:useState 的正确用法
前端·vue.js·typescript·nuxt4
jerrywus31 分钟前
手机控制 AI 编程?Paseo 让你随时随地跑 Claude Code / Codex
前端·agent·claude
GISer_Jing42 分钟前
前端视频技术全解析:从编解码到渲染优化
前端·音视频·状态模式
LIO1 小时前
Vue3 + Pinia 完整使用教程(企业级)
前端·vue.js
军军君011 小时前
数字孪生监控大屏实战模板:智慧城市大屏
前端·vue.js·typescript·前端框架·echarts·智慧城市·大屏展示
CDN3601 小时前
高防切换后网站打不开?DNS 解析与回源路径故障排查
前端·网络·数据库
信也科技布道师1 小时前
把7个页面变成1段对话:AI如何重构借款流程
前端·人工智能·重构·架构·交互·用户体验