这是我参与「第五届青训营」伴学笔记创作活动的第 12 天。

为什么需要构建工具？

前端工程的痛点

• 模块化：将项目代码拆分为不同的模块进行开发
  JS本身在语言标准上没有支持模块化
  目前常用的外部实现规范：ESM、CommonJS、UMD（尚未统一）
• 资源编译：高级语法的转译
• 产物质量：代码体积、代码性能
• 开发效率：开发时的热更新

前端构建工具的意义

对应于上述痛点，前端构建工具需要提供以下能力：

• 模块化方案
  • 提供模块加载方案
  • 兼容不同模块规范
• 语法转译
  • 高级语法转译，如 Sass、TypeScript
  • 资源加载，如图片、字体、worker
• 产物质量
  • 产物压缩
  • 无用代码删除
  • 语法降级
• 开发效率
  • 热更新

Vite及其优势

• 定位：新一代前端构建工具
• 两大组成部分
  • No-bundle 开发服务（与Webpack等传统构建工具不同，源文件无需打包）
  • 生产环境基于Rollup的Bundler
• 核心特征
  • 高性能：开发时启动速度和热更新速度非常快
    • 案例1：从Rollup切换至Vite后，启动时间从2分15秒提升至1.7秒，更新时间从23秒提升至1秒以内
    • 案例2：从Webpack切换至Vite后，启动时间从2分36秒提升至6秒，更新时间从13秒提升至1秒以内
  • 简单易用，开发者体验好

传统工具的不足

• 缓慢的启动：项目编译等待时间成本高
• 缓慢的热更新：修改代码后不能即时更新

这些问题的根源在于：

• bundle带来的性能开销
• JavaScript语言的性能瓶颈

前端代码环境现状

• 浏览器对原生ESM的普遍支持（目前占比92%以上）
  • <script>标签支持type="module"属性
  • 使用ESM模块导入导出语法
  浏览器就可以处理正如import语句这样的模块组织语句，并自动请求相应的依赖文件。
• 基于原生语言编写前端编译工具链（如Go语言编写的esbuild、Rust 编写的SWC）逐渐普及

Vite的优势

• 利用浏览器原生支持ESM的特性而设计的开发服务

  • 开发时无需打包项目源代码
  • 天然支持按需加载
  • 可以利用浏览器的文件级缓存特性 当变更了一个文件时，不会导致整个项目的所有资源缓存失效

• 基于esbuild的编译性能优化

  打包器（Bundler，对应于Webpack）、编译器（Transformer，对应于babel）和压缩器（Minifier，对应uglify.js）的执行速度极大提高

• 内置Web构建能力

  Vite开箱即用（不做任何配置）的功能等价于

  • webpack
  • webpack-dev-server
  • css-loader
  • style-loader
  • less-loader
  • sass-loader
  • postcss-loader
  • file-loader
  • MiniCssExtractPlugin
  • HTMLWebpackPlugin
  • ……

  内置能力使得较Webpack的配置文件，Vite配置变得十分精简

Vite的使用

Vite默认支持了几乎所有常见前端资源的导入，即开即用，且默认开启了

• 开发时热更新（更新时，未被更新的组件状态会被保留）
• 死代码删除（Tree Shaking）

# 提前安装pnpm（提高npm的安装速度）
npm i-g pnpm
# 初始化命令
pnpm create vite
# 安装依赖
pnpm install
# 启动项目
npm run dev