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

本堂课重点内容

本堂课重点讲述了前端工程化概念、Vite概述和Vite进阶路线。

前端工程化概念

• 前端为什么要使用构建工具？
  • 前端四大痛点
  • 模块化（把项目拆分成不同部分，分而治之）
  • 资源编译（把资源编译成浏览器可以识别的形式）
  • 产物质量（压缩代码体积，提升代码性能，语法兼容性）
  • 开发效率
• 前端构建工具的意义
  • 模块化方案：提供统一模块加载方案；兼容不同模块规范
  • 语法转译：高级语法转译（eg：Sass、TypeScript）；资源加载
  • 产物质量：产物压缩、删除无用代码、语法降级
  • 开发效率：热更新

Vite概述

Vite是新一代前端构建工具，开发阶段No-bundle服务，生产环境基于Rollup的Bundler。

• 核心特征
  • 高性能：启动速度和热更新快，响应迅速
  • 简单易用，开发者体验好，开箱即用

传统构建工具：webpack、rollup、parcel、browserify

• Vite的优点：
  • 基于原生ESM的开发服务优势：无需打包项目源码、天然按需加载、利用文件级的浏览器缓存
  • 基于Esbuild的编译性能优化：融合打包器、编译器、压缩器三种功能
• Vite关键技术
  • 依赖预打包：扫描代码中的依赖，用Esbuild编译TS/JSX；单文件编译，编译速度提升；但是不支持类型检查，语法只支持ES6及以上
  • 代码压缩：Esbuild
  • 插件机制：Rollup

Vite进阶路线

• 学习Vite底层非常依赖的两个引擎技术：Esbuild、Rollup

  先了解基本使用，动手尝试各项常用配置，然后学习其插件开发。

• Vite插件开发：抽离核心逻辑、易于拓展

  先看Vite插件开发文档，掌握插件钩子的功能；然后学习其他插件，掌握套路：JSON加载插件、Esbuild接入插件、官方React插件

• 代码分割（拆包）

• JS编译工具Bebel

• 语法安全降级

• 服务端渲染SSR

• 深入了解底层标准：CJS规范、ESM规范、HTTP2.0特性

个人总结

Vite与Webpack一样，都是前端工程化的重要构建工具之一，其基于浏览器原生ESM特性导入组织代码，在服务器端按需编译返回，无需打包项目源码；生产环境基于Rollup的Bundler号称下一代的前端构建工具，具有启动快、开箱即用等特点。