logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.4
  • v6 的一些 CSS 琐事
  • 👀 视觉回归测试
  • 为什么禁用日期这么难?
  • 封装 Form.Item 实现数组转对象
  • 行省略计算
  • 📢 v4 维护周期截止
  • antd 里常用的 TypeScript 工具方法
  • 一个构建的幽灵
  • 当 Ant Design 遇上 CSS 变量
  • API 的历史债务
  • 灵动的 Notification
  • 色彩模型与颜色选择器
  • 主题拓展
  • 虚拟表格来了!
  • 快乐工作主题(一)
  • 动态样式去哪儿了?
  • Suspense 引发的样式丢失问题
  • 打包体积优化
  • 你好,GitHub Actions
  • 所见即所得
  • 静态方法之痛
  • SSR 静态样式导出
  • 依赖排查
  • 贡献者开发维护指南
  • 转载-如何提交无法解答的问题
  • 新的 Tooltip 对齐方式
  • 非必要的渲染
  • 如何成长为 Collaborator
  • Modal hook 的有趣 BUG
  • antd 测试库迁移的那些事儿
  • Tree 的勾选传导
  • getContainer 的一些变化
  • 组件级别的 CSS-in-JS

一个构建的幽灵

2023-12-20
@zombieJ

文章被以下专栏收录:

antd

Ant Design

Juejin logoAnt Design 开源专栏
Juejin logo我有想法,去参与讨论
文档贡献者
  • antd 里常用的 TypeScript 工具方法当 Ant Design 遇上 CSS 变量

    相关资源

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-首页模板集
    Scaffolds-脚手架市场
    Umi-React 应用开发框架
    dumi-组件/文档研发工具
    qiankun-微前端框架
    Ant Motion-设计动效
    国内镜像站点 🇨🇳

    社区

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design 语雀专栏
    Ant Design 知乎专栏
    体验科技专栏
    seeconf logoSEE Conf-蚂蚁体验科技大会
    加入我们

    帮助

    GitHub
    更新日志
    常见问题
    报告 Bug
    议题
    讨论区
    StackOverflow
    SegmentFault

    Ant XTech logo更多产品

    yuque logo语雀-构建你的数字花园
    AntV logoAntV-数据可视化解决方案
    Egg logoEgg-企业级 Node.js 框架
    Kitchen logoKitchen-Sketch 工具集
    Galacean logoGalacean-互动图形解决方案
    xtech logo蚂蚁体验科技
    主题编辑器
    Made with ❤ by
    蚂蚁集团和 Ant Design 开源社区

    在 antd-mobile 的维护过程中,遇到了一个恼人的幽灵。它在本地构建时几乎不会出现,但是在 github 的 workflow 中,却几乎每次都会出现。在经过一番折腾后,终于找到了它的踪迹。

    CI 又挂了

    在 antd-mobile 的 CI 中,有一个任务会对构建产物进行检查,会对文件大小变化进行提示。但是这个任务在最近几个月中,经常会出现构建失败的情况,如下图所示:

    CI failed

    查看日志,会得到 CSS 文件报错的信息:

    Unknown word

    从构建流程看,似乎是在 2x 构建时报错(antd-mobile 会额外打一份 2x 的样式以适配高清屏):

    log
    [09:44:16] Using gulpfile ~/work/ant-design-mobile/ant-design-mobile/gulpfile.js
    [09:44:16] Starting 'default'...
    [09:44:16] Starting 'clean'...
    [09:44:17] Finished 'clean' after 286 ms
    [09:44:17] Starting 'buildES'...
    [09:44:26] Finished 'buildES' after 8.77 s
    [09:44:26] Starting 'buildCJS'...
    [09:44:27] Finished 'buildCJS' after 1.72 s
    [09:44:27] Starting 'buildDeclaration'...
    [09:44:27] Starting 'buildStyle'...
    [09:44:28] Finished 'buildStyle' after 682 ms
    [09:44:34] Finished 'buildDeclaration' after 6.5 s
    [09:44:34] Starting 'copyAssets'...
    [09:44:34] Finished 'copyAssets' after 2.37 ms
    [09:44:34] Starting 'copyMetaFiles'...
    [09:44:34] Finished 'copyMetaFiles' after 4.64 ms
    [09:44:34] Starting 'generatePackageJSON'...
    [09:44:34] Finished 'generatePackageJSON' after 2.72 ms
    [09:44:34] Starting 'buildBundles'...
    [09:44:45] Finished 'buildBundles' after 11 s
    [09:44:45] Starting 'init2xFolder'...
    [09:44:46] Finished 'init2xFolder' after 811 ms
    [09:44:46] Starting 'build2xCSS'...
    [09:44:46] 'build2xCSS' errored after 126 ms
    [09:44:46] CssSyntaxError in plugin "gulp-postcss"

    而 build2xCSS 的 style.css 来源于 buildStyle 的产物,所以可以确定是 buildStyle 任务中出现了问题。在查看对应的文件 /lib/bundle/style.css 后,发现了如下的内容:

    Break Lines

    style.css 第一行为压缩的样式,而后是不完整的未压缩的样式。对比成功的产物会发现第二行往后的样式是非预期的内容:

    Success Style

    而根据未压缩的内容进行查询,会发现这些内容在之前的压缩内容中已经存在了:

    Duplicated Content

    因而猜测可能是构建时,先生成了未压缩的内容,然后又进行了压缩操作。但是又存在异步问题,第二个任务在第一个未完成时就开始执行了,导致了内容的重复。更诡异的是,如果是异步问题,CI 上生成的错误文件内容却出奇的一致。无论构建多少次,只要是失败的就必定是相同的内容。

    并发问题

    在查看了 gulpfile.js 文件后,发现 buildStyle 使用的是 vite 构建。考虑到可能是构建版本的问题,所以将 vite 的版本从 3.x 升级到了 5.x,但是问题依旧存在。于是又看了一下相关配置:

    tsx
    {
    root: process.cwd(),
    mode: env,
    logLevel: 'silent',
    define: { 'process.env.NODE_ENV': `"${env}"` },
    build: {
    cssTarget: 'chrome61',
    lib: {
    formats,
    ...
    },
    rollupOptions: {
    output: {
    dir: './lib/bundle',
    globals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    },
    },
    },
    minify: isProd ? 'esbuild' : false,
    },
    }

    通过关闭 logLevel: 'silent' 配置后再次构建,我们可以看到更多的日志内容:

    Bundle Result

    看来接近答案了,antd-mobile 在构建时会通过 lib.formats 创建 es、cjs、umd 三份副本。而每个 format 都会生成一次 style.css 文件。如果仅是不断覆盖文件,那应该只是额外的浪费了构建资源而已,最后总是会被压缩的 style.css 覆盖掉,不应该出现同时覆盖的问题。于是去看了一下调用 vite 构建的部分:

    tsx
    async function buildBundles(cb) {
    const envs = ['development', 'production'];
    const configs = envs.map((env) =>
    getViteConfigForPackage({
    env,
    formats: ['es', 'cjs', 'umd'],
    external: ['react', 'react-dom'],
    }),
    );
    await Promise.all(configs.map((config) => vite.build(config)));
    cb && cb();
    }

    原来是使用了 Promise.all 来并发构建,而 vite 的构建是异步的。这使得 style.css 存在竞争问题。vite 调用的 rollup 会对文件进行清除,然后进行写操作。由于压缩样式需要进行 uglify,所以它总是慢于非压缩版本。当 rollup 都执行完清理操作开始写文件后,非压缩版本虽然前面一部分由于清理被删除但是后续内容仍然继续被写入,而压缩版本则从头开始写入。当两者都写入完毕后,就会出现错误并且内容却在每次 CI 构建下都一致的情况。修复也很简单,直接改成顺序执行即可:

    tsx
    for (const config of configs) {
    await vite.build(config);
    }

    (当然,后续还需要对脚本进行优化。使其跳过非必要的 style.css 样式生成)

    以上

    随着 github CI 的性能变化,原本很难遇到的幽灵反而变得可以稳定重现,颇为有趣。从而也使得我们有机会可以定位到问题之所在。