【性能优化】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'
        ]
      }
    ]
  }
}
相关推荐
m0_748255266 分钟前
easyExcel导出大数据量EXCEL文件,前端实现进度条或者遮罩层
前端·excel
web1478621072340 分钟前
C# .Net Web 路由相关配置
前端·c#·.net
m0_7482478041 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖44 分钟前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构
青灯文案11 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_748254881 小时前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.1 小时前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营1 小时前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood2 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端2 小时前
0基础学前端-----CSS DAY9
前端·css