记一次 webpack code-splitting 失效问题

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

问题产生背景

  • 某天我们同事需要实现一个业务需求,引入了某个工具包 xxx

  • 然后在使用这个工具包的时候发现有点问题

  • 查阅文档说需要把项目中的 babelmodules 属性配置调整一下, 使用 commonjs 模式

  • 同事调整完之后发现这个库确实好使了,业务需求实现了,产品很满意

爆雷

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

  • 然后我们小组几个铁子就立马开始排查问题产生的原因了...

问题排查

本地复现

  • 我先在本地执行 build 命令把项目构建成功之后

  • 发现 dist 里面的 js 文件夹里面只有下图这些 js 文件

  • app.10721af9.js 大小为 22MB...

  • vendors.10721af9 大小为 34MB...

  • 从上面的现象来看,很明显是 webpackcode-splitting 没生效导致的问题

  • 项目中是在路由层面通过 import()webpackChunkName 来实现的 code-splitting

  • vue-router

js 复制代码
component: () => import(/* webpackChunkName: "wangzhihao" */ '@/package/wangzhihao/index.vue');

排查 webpack

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

  • 他调整的 babel 配置如图

排查 babel

  • 我尝试把 babelmodules 属性还原为 false,然后重新 build 一下项目

  • 结果问题就解决了,构建出来的 js 文件夹按预期通过 webpackChunkName 实现了 code-splitting,按模块分好了 js 文件

问题复盘

为什么 babel 配置会影响 code-splitting ?

  • 我一问巨佬 chatgpt 它的回答就给我明确的线索!太吊了

本质原因

  • 同事把 babel@babel/preset-env 的配置 modules 值从 false 改为 commonjs

  • modulescommonjs 时, @babel/preset-env 会将 es module 转换成 commonjs

  • 结果就是把项目中写的 import() 转换成了 require()

  • 然而 webpack 处理 require() 就是正常的模块打包加载,不会编译成动态加载的模块,进而导致 code-splitting 失效

babel modules 不同编译效果

modules 为 false

modules 为 commonjs

参考资料

babel issue

babel-preset-env modules

相关推荐
mCell28 分钟前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip28 分钟前
Node.js 子进程:child_process
前端·javascript
excel4 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel5 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼6 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping6 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙7 小时前
[译] Composition in CSS
前端·css
白水清风7 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix7 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278007 小时前
new、原型和原型链浅析
前端·javascript