1 课程内容概括

本笔记对应的课程部分介绍了构建工具Vite。

2 为什么要使用构建工具

前端工程的核心要素是资源。

模块化方案提供模块加载方案，同时支持兼容不同模块的规范。

语法转译提供高级语法转译与资源加载。

提高产物质量可以提供产物压缩、无用代码删除、语法降级。

开发效率可以通过热更新提升。

Vite的定位是新一代前端构建工具。它有两大组成部分，1.No-bundle开发服务，源文件无需打包。2.生产环境基于Rollup的Bundler。

核心特征包括1.高性能，dev启动速度与热更新速度快；简单易用、开发者体验好。

缓慢启动：项目编译等待成本高。

缓慢的热更新：修改代码后不能实时更新。

bundle带来的性能开销，JavaScript语言存在性能瓶颈。

全球浏览器对ESM有普遍支持。

基于Go、Rust等原生语言编写前端编译工具链。

Esbulid是基于Golang开发的前端工具，具有打包器、编译器、压缩器，性能非常高，在Vite中被深度使用。

安装 Node.js、创建新项目、安装 Vite、创建一个新的 Vite 项目、运行 Vite 服务器、在src目录中编写应用程序代码、构建应用程序。

HMR无需额外配置，默认开启。

Tree Shaking无需额外配置，默认开启。优化原理：基于ESM的import/export语句依赖关系、与运行时状态无关；在构建阶段会将未使用到的代码删除。

依赖预打包、单文件编译、代码压缩、插件机制

深入双引擎、插件开发、代码分割、理解babel、语法安全降级、服务端渲染、底层标准、了解社区生态。

本节课介绍了构建工具Vite相关的知识。