面试官：npm run build 到底干了什么？从 package.json 到 dist 的 7 步拆解

小高0072025-08-18 13:52

本文以 Vite + Vue3 为例，逐行跟踪 npm run build 的全过程，附 1 张流程图 + 关键日志，看完能 30 秒答完面试。

一、总览：7 步流水线

text 复制代码

1. 读取 package.json → 2. 解析 build 脚本 → 3. Vite 打包 → 4. 代码分割 → 5. 压缩混淆 → 6. 生成 dist → 7. 输出报告

二、逐行拆解（以 Vite 为例）

① 读取 package.json

json 复制代码

"scripts": {
  "build": "vite build"
}

npm run build → 执行 vite build 命令。

② 解析 build 脚本

bash 复制代码

$ vite build

Vite CLI 被拉起，加载 vite.config.js 配置。

③ Vite 打包（Rollup 内核）

js 复制代码

// vite.config.js
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: { vendor: ['vue'] } // 代码分割
      }
    }
  }
});

解析入口 → 2. 分析依赖 → 3. 生成 AST → 4. 转译 TS/JS → 5. Tree-Shaking 无用代码。

④ 代码分割

输出目录：

arduino 复制代码

dist/
├─ assets/
│  ├─ index.a1b2.js      // 业务代码
│  ├─ vendor.3c4d.js     // 第三方库
│  └─ index.e5f6.css     // 样式
└─ index.html            // 注入资源路径

⑤ 压缩混淆

Terser：压缩 JS（去掉空格、重命名变量）。
CSSO：压缩 CSS。
图片压缩：webp/avif 转换。

⑥ 生成 dist

bash 复制代码

vite build
✓ 3 modules transformed.
dist/index.html              0.46 kB │ gzip: 0.29 kB
dist/assets/index.a1b2.js    45.21 kB │ gzip: 15.30 kB
dist/assets/vendor.3c4d.js   128.90 kB │ gzip: 45.20 kB

生成 哈希文件名，实现强缓存。

⑦ 输出报告

bash 复制代码

Build completed in 1.23s

可选开启 --report 查看包体积分析。

三、面试 30 秒回答模板

"npm run build 先读 package.json 找到 vite build，Vite 用 Rollup 打包：入口解析 → 依赖分析 → Tree-Shaking → 代码分割 → 压缩混淆 → 输出带哈希的 dist，整个过程 1-2 秒完成。"