这是我来参加[第五届青训营]笔记创作活动的第十四天。
今天跟着杨兴元老师学习前端构建工具Vite。
学习前端构建工具的意义：
- 模块化方案：提供模块加载方案；兼容不同模块规范
- 语法转译：高级语法转译，如Sass、TypeScript；资源加载，如图片、字体、worker
- 产物质量：产物压缩、无用代码删除、语法降级
- 开发效率：热更新
Vite概览
- 定位：新一代前端构建工具
- 组成部分：No-bundle开发服务，源文件无需打包；生产环境基于Rollup的Bundler
- 核心特征：高性能，dev启动速度和热更新速度非常快！；简单易用，开发者体验好
使用Vite：安装Vite（用npm或者yarn安装），创建项目（使用Vite命令创建），编写代码（使用html、css、js），运行项目（使用Vite启动项目，并在浏览器访问），构建项目（使用Vite构建项目，并发布到生产环境）
Vite整体框架
关键技术
- 预打包：避免node_modules过多的文件请求；将CommonJs格式转换为ESM格式（实现的原理：服务启动前扫描代码中用到的依赖；用Esbuild对依赖代码进行预打包；改写import语句，指定依赖为预购建产物路径）
- 单文件编译：用Esbuild编译TS/JSX（优势：编译速度提升10-100x局限性）
- 代码压缩：（Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具）
- 插件机制
深入Vite的几个方面
- Vite的插件和配置，学会如何使用Vite的插件
- 理解Vite的架构，了解核心原理
- 理解Vite的代码分割，学习使用Vite实现代码分割，优化项目的性能
- 了解Vite的高级特性，路由、状态管理、数据请求等
总结：今天这节课让我了解到除了webpack以外的构建工具Vite，在实际开发中，需要根据项目来选择合适的工具，受益匪浅。
