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,
  },
};
相关推荐
无羡仙20 分钟前
替代 Object.freeze 的精准只读模式
前端·javascript
web前端12330 分钟前
Java客户端开发指南 - 与Web开发对比分析
前端
龙在天31 分钟前
前端 9大 设计模式
前端
搞个锤子哟31 分钟前
网站页面放大缩小带来的问题
前端
hj5914_前端新手32 分钟前
React 基础 - useState、useContext/createContext
前端·react.js
半花34 分钟前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
霍格沃兹_测试40 分钟前
软件测试 | 测试开发 | H5页面多端兼容测试与监控
前端
toooooop81 小时前
本地开发环境webScoket调试,保存html即用
前端·css·websocket
山有木兮木有枝_1 小时前
手动封装移动端下拉刷新组件的设计与实现
前端
阳光阴郁大boy1 小时前
大学信息查询平台:一个现代化的React教育项目
前端·react.js·前端框架