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,
  },
};
相关推荐
研☆香2 小时前
聊一聊js中的正则表达式的应用
前端·javascript·正则表达式
开心就好20252 小时前
使用Edge和ADB进行Android Webview远程调试的完整教程
前端·ios
用泥种荷花2 小时前
从 0 到 1 做一个支持 NFC 写入的小程序,需要哪些 API?
前端
90程序员2 小时前
纯浏览器解析 APK 信息,不用服务器 | 开源了一个小工具
前端·apk
用户11481867894842 小时前
Vosk-Browser 实现浏览器离线语音转文字
前端·javascript
江上清风山间明月2 小时前
Vite现代化的前端构建工具详解
前端·webpack·nodejs·vite
PBitW2 小时前
apijson 让前端自己定义接口 —— 但不推荐
前端·apijson
存在X2 小时前
前端自动化编译Jenkins
前端·github
军军君012 小时前
数字孪生监控大屏实战模板:云数据中心展示平台
前端·javascript·vue.js·typescript·前端框架·es6·echarts
吴声子夜歌3 小时前
Vue3——使用axios实现Ajax请求
前端·javascript·ajax·axios