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

本文以 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'] } // 代码分割
      }
    }
  }
});
  1. 解析 入口 → 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 秒完成。"

相关推荐
前端架构师-老李18 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡18 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
拖拉斯旋风18 小时前
📚 JavaScript 变量声明三剑客:`var`、`let`、`const` 学习笔记
javascript
用户214965158987518 小时前
从零搭建uniapp环境-记录
前端
可触的未来,发芽的智生20 小时前
追根索源:换不同的词嵌入(词向量生成方式不同,但词与词关系接近),会出现什么结果?
javascript·人工智能·python·神经网络·自然语言处理
努力写代码的熊大20 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER20 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh20 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒20 小时前
React 19重磅前瞻:10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端
m0_7482336421 小时前
C++开发中的常用设计模式:深入解析与应用场景
javascript·c++·设计模式