记一次 webpack code-splitting 失效问题

记一次调整项目 babel 配置后 webpack 的 code-splitting 失效问题

问题产生背景

某天我们同事需要实现一个业务需求，引入了某个工具包 xxx
然后在使用这个工具包的时候发现有点问题
查阅文档说需要把项目中的 babel 的 modules 属性配置调整一下, 使用 commonjs 模式
同事调整完之后发现这个库确实好使了，业务需求实现了，产品很满意

爆雷

又是某个工作日的下午，我们老大发现我们的项目加载有点慢，打开控制台看了下发现我们的项目首页加载的 js 文件很大，压缩完的都有 十多兆 ，源文件直接好 几十兆...然后就找我们沟通情况、排查问题、尽快解决问题。
然后我们小组几个铁子就立马开始排查问题产生的原因了...

问题排查

本地复现

我先在本地执行 build 命令把项目构建成功之后
发现 dist 里面的 js 文件夹里面只有下图这些 js 文件
app.10721af9.js 大小为 22MB...
vendors.10721af9 大小为 34MB...

从上面的现象来看，很明显是 webpack 的 code-splitting 没生效导致的问题
项目中是在路由层面通过 import() 和 webpackChunkName 来实现的 code-splitting
vue-router

js 复制代码

component: () => import(/* webpackChunkName: "wangzhihao" */ '@/package/wangzhihao/index.vue');

排查 webpack

在把有问题的项目中的 webpack 中 code-splitting 的相关使用方法和其他表现正常的项目对比下来，发现相关的 webpack 配置一模一样，所以关注点转移到 @babel/preset-env 的配置项 modules 上来。提出这个想法后，之前调整过 babel 配置的同事就立马反应过来了。