记一次 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

相关推荐
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 小时前
CommonJS与ESM
前端·javascript
LaoZhangAI1 小时前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课1 小时前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试