2026-09-03

预打包检查

前言

每次改完代码想发布，最怕的就是打包到一半才报错。真正打包要压缩、写产物、跑 legacy 双构建，慢且浪费。本文分享一个”预打包检查”思路：只做解析 + 编译 + bundle，不写任何产物，几十秒就能把语法、文件引用、依赖问题提前暴露出来。

正文

为什么比真正打包快

真正的生产打包会做这些耗时操作：

压缩混淆（minify）：逐文件缩小体积，纯属浪费时间
写磁盘（write）：生成 dist 产物，检查完还要清理
legacy 双构建：为了兼容老浏览器再打一份 ES5，耗时大户

而预打包检查关心的是”代码能不能顺利构建出来”，不是”产物多好看”。所以把这三件事全部跳过：

开关	作用
`write: false`	只生成不写磁盘，不产生 dist 产物（关键）
`minify: false`	跳过压缩，省时间，不影响检查结果
注释掉 legacy 插件	跳过双构建，纯检查不需要

一个例外：cesium 插件不能跳

有真实文件依赖的插件不能乱跳——比如 cesium，它会把资源拷贝到产物目录并改写引用路径。如果跳过它，检查会”假绿”：代码没问题，但真正打包时 cesium 相关文件缺失导致失败。所以检查脚本里要保留 cesium 插件，跳的只是无文件依赖的纯构建插件（如 legacy）。

配置示例

先在 package.json 里加一条脚本：

1
2
3

"scripts": {
  "check:build": "node --max_old_space_size=8096 scripts/check-build.js"
}

--max_old_space_size=8096：项目大、依赖多时，默认堆内存（约 512MB ~ 2GB）可能不够，提前把 Node 老生代堆上限提到 8GB，避免构建中途 OOM。

然后新建 scripts/check-build.js：

// scripts/check-build.js — 预打包检查：解析+编译+bundle，不写产物
const { build } = require('vite');
const path = require('path');

async function main() {
  try {
    await build({
      root: path.resolve(__dirname, '..'),
      mode: 'production',
      build: {
        write: false,         // ← 关键：只生成不写磁盘
        minify: false,        // ← 跳过压缩（省时间，不影响检查结果）
        cssCodeSplit: false,
        chunkSizeWarningLimit: 2048,
        rollupOptions: {
          input: path.resolve(__dirname, '../index.html'),
          output: {
            manualChunks: {
              vue: ['vue', 'pinia', 'vue-router'],
              antdv: ['ant-design-vue', '@ant-design/icons-vue'],
            },
          },
        },
      },
      plugins: [
        // 跳过 legacy 双构建（耗时大户，纯构建检查不需要）
        // 但保留 cesium 插件，因为它有真实文件依赖，跳过会假绿
      ],
      logLevel: 'warn',
    });
    console.log('✓ 预打包检查通过：语法、文件、依赖均无问题');
  } catch (e) {
    // vite 内部已经打印了完整错误信息
    console.error('✗ 预打包检查失败，请修复上述错误');
    process.exit(1);
  }
}
main();

各配置项含义

mode: 'production'：以生产模式解析，能触发 process.env.NODE_ENV 相关的条件编译和 tree-shaking 检查，比 dev 模式更接近真实构建
cssCodeSplit: false：不拆 CSS，减少处理环节（仅检查用）
chunkSizeWarningLimit: 2048：把 chunk 体积告警阈值抬高到 2MB，避免无关紧要的体积警告刷屏干扰判断
manualChunks：与正式打包保持一致的分包规则，确保分包配置本身不会在真正打包时报错
logLevel: 'warn'：只输出警告以上日志，成功时输出干净，失败时错误信息完整可见

什么时候跑

发布前：npm run check:build 通过后再执行真正打包，把失败概率挡在打包之前
CI 里：作为检查项之一，语法/依赖问题在合并前就拦截
依赖升级后：改了依赖版本，先跑一遍，快速确认没有破坏性变更

检查能覆盖什么

JS/TS 语法错误、解析失败
入口与依赖文件缺失、路径引用错误
静态导入的模块找不到、插件处理报错
内存不足等构建环境问题

注意：它是”构建层”检查，不替代 lint（代码风格）、类型检查（vue-tsc）和单测。四者配合才是完整的发布前质量门禁。

总结

预打包检查的核心就一句话：用 write: false + minify: false 让 Vite 只做”解析 → 编译 → bundle”的演练，不产产物、不压缩、不双构建，从而用最短时间验证代码能否顺利构建。配合 manualChunks 同步正式打包的分包配置、保留有真实文件依赖的插件（cesium），既快又不会”假绿”。发布前先跑 npm run check:build，把问题留在打包之前。

内容由 AI 生成，仅供参考。本文发布于码上学习，转载请注明出处。