【性能优化】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'
        ]
      }
    ]
  }
}
相关推荐
知心宝贝3 分钟前
写了那么久的前端,你真的了解浏览器背后的“小动作“吗?
前端·程序员·浏览器
wycode3 分钟前
Vue2实践(2)之用component做一个动态表单(一)
前端·javascript·vue.js
维李设论4 分钟前
前端智能化 | AG-UI实践及原理浅析
前端·aigc·agent
第七种黄昏5 分钟前
Vue3 中的 ref、模板引用和 defineExpose 详解
前端·javascript·vue.js
一只卡比兽5 分钟前
动态规划与贪心算法详解:原理、对比与代码实践
前端
aiwery8 分钟前
一文掌握 TypeScript 工具类型:Record、Partial、Omit、Pick 等实战用法
前端·代码规范
ankleless22 分钟前
C语言(12)——进阶函数
前端·html
一条上岸小咸鱼26 分钟前
Kotlin 基本数据类型(四):String
android·前端·kotlin
我是哈哈hh41 分钟前
【Node.js】ECMAScript标准 以及 npm安装
开发语言·前端·javascript·node.js
张元清1 小时前
电商 Feeds 流缓存策略:Temu vs 拼多多的技术选择
前端·javascript·面试