第十章：构建之巅 · 打包与部署的终极试炼

原创已于 2025-05-27 23:35:36 修改 · 564 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #前端 #javascript

于 2025-05-27 23:28:55 首次发布

代码之门：前端纪元专栏收录该内容

27 篇文章

订阅专栏

第一章：HTML基石·现实的骨架
 第二章：CSS秘典 · 色彩与布局的力量
 第三章：JavaScript引擎 · 行为之火
 第四章：DOM迷宫 · 掌控页面之心
 第五章：异步幻境 · 时间与数据的秘密
 第六章：事件风暴 · 用户的意志
 第七章：组件之城 · 重构世界的拼图术
 第八章：数据幻域 · 状态与响应的涌动之力
 第九章：路由边境 · 穿越页面的维度之门

剧情引入：升上云巅

林昊穿越了九章考验，来到最后的“构建之巅”。这里云雾缭绕，站着一位身披编译火焰的老人——“构建长老”。长老说：

“代码完成，并不等于使命达成。你必须学会将源代码编译成浏览器能运行的形式，并安全地交付给用户。”

于是，林昊踏入最后的打包之门——终极试炼：构建与部署。

一、为什么要构建？

开发代码 ≠ 浏览器可直接运行代码

开发中使用的语法和工具，如：

ES6+ 高级语法（如 async/await、模块导入）
SASS、LESS 预处理器
JSX、TSX 模板
模块化组织（import、export）

都需要打包构建，转换为浏览器识别的 HTML/CSS/JS。

二、模块化的奥义

🔹 CommonJS（Node 使用）：

// a.js
module.exports = function () {}

// b.js
const a = require('./a')

🔹 ESM（浏览器支持，现代前端主流）：

// a.js
export default function () {}

// b.js
import a from './a.js'

构建工具的使命：扫描这些模块关系，打包成一个或多个浏览器能识别的 bundle。

三、Webpack：构建的炼金术

Webpack 是前端最主流的构建工具之一，它像一个炼金术士，将源码变为纯净的可执行“黄金包”。

⚙ 基本使用：

npm install webpack webpack-cli -D

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ]
  }
}

npx webpack --mode production

🧩 核心概念：

概念	说明
Entry	入口文件
Output	输出设置
Loaders	预处理器，如转译 TS/LESS
Plugins	插件，如压缩、注入环境变量等
Mode	构建模式：development 或 production

四、Vite：极速构建新纪元

构建长老指向一座白色轻舟——“Vite”，飞速而稳定。

Vite 是基于原生 ESM 的现代构建工具，冷启动极快，适合 React/Vue 项目。

npm create vite@latest my-project
cd my-project
npm install
npm run dev

开箱即用，几乎不需配置；支持 HMR 热更新、TS/JSX/SASS、插件机制等。

五、构建优化秘籍

技术术语	简述
Tree-Shaking	移除未使用的代码
Code Splitting	拆分 bundle 实现按需加载
Lazy Loading	页面滚动或用户触发时再加载某些模块（如图片、JS）
压缩 Minify	使用 Terser、cssnano 等压缩体积
SourceMap	映射调试源码位置（生产环境中通常关闭）

六、部署上线：将代码托付给世界

✅ 方法一：GitHub Pages

将项目推送到 GitHub
安装部署工具：
```
npm install gh-pages -D
```

修改 package.json：

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

执行部署：
```
npm run deploy
```

✅ 方法二：Vercel / Netlify（支持 CI）

可自动读取 Git 仓库并部署静态站点
支持自动构建、回滚、预览环境
免费使用，绑定自定义域名

🧠 实战任务：登顶挑战

使用 Webpack 或 Vite 构建一个小型前端项目（含组件、样式）
尝试使用 Tree-Shaking，观察包大小变化
使用 Netlify 部署项目并访问公网链接
用 webpack-bundle-analyzer 查看打包体积构成