【性能优化】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'
        ]
      }
    ]
  }
}
相关推荐
超级无敌攻城狮13 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel13 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip14 小时前
JavaScript事件流
前端·javascript
赵得C14 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG14 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_4569042714 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路14 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa14 小时前
HTML和CSS学习
前端·css·学习·html
秋秋小事14 小时前
React Hooks useContext
前端·javascript·react.js
Jinuss14 小时前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3