【性能优化】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'
        ]
      }
    ]
  }
}
相关推荐
从零开始学习人工智能1 天前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
虫虫rankourin1 天前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
小刘鸭地下城1 天前
Web安全必备:关键 HTTP 标头解析
前端
yddddddy1 天前
html基本知识
前端·html
鼠鼠我捏,要死了捏1 天前
RocketMQ 高可用集群原理深度解析与性能优化实践指南
性能优化·消息队列·rocketmq
荣达1 天前
koa洋葱模型理解
前端·后端·node.js
reembarkation1 天前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
KenXu1 天前
F2C-PTD工具将需求快速转换为代码实践
前端
给月亮点灯|1 天前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青1 天前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js