浅谈构建工具

为什么需要构建工具？

• 模块化
  • ESM CommonJS UMD
• 资源编译
  • 高级语法的编译
• 产物质量
  • 代码体积、代码性能
• 开发效率
  • 热更新

核心要素 -- 资源

JS TS JSX CSS SCSS LESS PNG JPEG WEBP

前端构建工具的意义

Vite 是什么？ Why Vite

定位：新一代前端构建工具

两大组成部分

1. No-bundle 开发服务，源文件无需打包
2. 生产环境基于 Rollup 的 Bundler

核心特征

1. 高性能，dev 启动速度和热更新速度非常快。
2. 简单易用，开发者体验好。

当下问题

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

基于 Esbuild 的编译性能优化

E是build -- 基于 Golang 开发的前端工具，具备如下能力：

1. 打包器 Bundler
2. 编译器 Transformer -- 性能极高，在Vite中被深度使用
3. 压缩器 MInifier

Vite开箱即用的功能等价于

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

项目初始化

npm i -g pnpm
pnpm create vite
pnpm install
npm run dev

生产环境 Tree Shaking

优化原理

1. 基于ESM的import/export语句依赖关系，与运行时状态无关
2. 在构建阶段将未使用到的代码进行删除

Tree Shaking 在 Vite 中无需配置，默认开启！

Vite 整体架构

单文件编译：Esbuild 代码压缩：Esbuild 插件机制：

• 开发阶段 -> 模拟 Rollup 插件机制
• 生产环境 -> 直接使用 Rollup

Vite 进阶路线

1. 深入双引擎
   • esbuild
   • rollup.js
2. Vite 插件开发
3. 代码分割(拆包)
4. JS 编译工具(Babel)
5. 语法安全降级
   • 上层解决方案 : @vitejs/plugin-legacy
   • 底层原理
     • 借助 Babel 进行语法自动降级
     • 提前注入 Polyfill 实现，如 core-js、regenerator-runtime
6. 服务端渲染(SSR)
   • 用于提升首屏性能和 SEO 优化
7. 深入了解底层标准 - 重点特性
   • CJS 规范
   • ESM 规范
   • HTTP 2.0 特性
8. Vite 社区生态