面试官: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 秒完成。"

相关推荐
带娃的IT创业者15 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
二十雨辰15 小时前
vite如何处理项目中的资源
开发语言·javascript
非凡ghost16 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_110616 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白16 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学17 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽17 小时前
【初学】调试 MCP Server
前端·mcp
四月_h17 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate18 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
正义的大古19 小时前
OpenLayers地图交互 -- 章节十八:拖拽旋转和缩放交互详解
javascript·vue.js·openlayers