目录

【性能优化】Webpack打包优化

一. 使用缓存

通过使用缓存,能够有效提升打包速度。

  • webpack5以下:cache-loader
  • webpack5:内置cache模块

内置cache模块

webpack5 内置了 cache 模块,缓存生成的 webpack 模块和 chunk,来改善构建速度。

在开发环境下,默认设置为 type: 'memory' 而在生产环境中被禁用。cache: { type: 'memory' }cache: true 作用一样,可以通过设置 cache: { type: 'filesystem' } 来开放更多配置项。

javascript 复制代码
module.exports = {
  cache: {
    type: 'filesystem',
  },
};

会在 node_modules 目录下生成一个 .cache 目录缓存文件内容,二次打包速度显著提升。

cache-loader

安装

javascript 复制代码
npm install cache-loader -D

在 webpack.config.js 对应的开销大的 loader 前加上 cache-loader。
注意:如果使用多线程加载器如 thread-loader 时,也需要确保 cache-loader 放在 thread-loader 之前。

javascript 复制代码
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'cache-loader',
          'babel-loader'
        ]
      }
    ]
  }
}
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
在掘金6 分钟前
【kk-utils】Excel工具——实践篇(一)
前端·excel
香蕉可乐荷包蛋10 分钟前
vue+electron IPC+sql相关开发(一)
前端·vue.js·electron
尘寰ya14 分钟前
什么是原型污染?如何防止原型污染?
前端·面试·原型模式
鸿蒙场景化示例代码技术工程师18 分钟前
实现实时语音转文字功能鸿蒙示例代码
前端
ohMyGod_12323 分钟前
高阶函数/柯里化/纯函数
前端·react.js·前端框架
CsharpDev-奶豆哥26 分钟前
如何理解前端开发中的“换皮“
前端·css·css3
Mike_jia27 分钟前
Navicat 数据库管理全攻略:从基础操作到企业级应用实战
前端
Jackson_Mseven28 分钟前
如何从0到1搭建基于antd的monorepo库——使用rollup进行打包、lerna进行版本管理和发布(六)
前端·react.js·ant design
圆号手28 分钟前
手搓ag-grid带筛选的下拉选择器(类似企业版的agRichSelectCellEditor)
前端
Lestat29 分钟前
Vue Router 中 params 和 query 的区别
前端