这是我参与「第五届青训营」伴学笔记创作活动的第十三天
一、本堂课重点内容
- 浅谈构建工具
- Vite 概要介绍
- Vite 上手实战
- Vite 整体架构
- Vite 进阶路线
二、详细知识点介绍
一、为什么要选择构造工具
- 模块化方案
- 提供模块加载方案
- 兼容不同模块规范
- 语法转译
- 高级语法转移，如Sass、TypeScript
- 资源加载，如图片、字体、worker
- 产物质量
- 产物压缩、无用代码删除、语法降级
- 开发效率
- 热更新
二、Vite 是什么？ Why Vite? 定位：新一代前端构造工具
两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup和Bundler
核心特征
- 高性能，dev启动速度和热更新速度非常快！
- 简单易用，开发者体验好
三、Vite上手使用
提前安装 pnpm：npm i -g pnpm
初始化命令：pnpm create vite
安装依赖：pnpm install
启动项目：npm run dev
四、vite整体框架 为什么要进行预打包
- 避免 node_modules 过多的文件请求
- 将 CommonJs 格式转换为 ESM 格式
实现原理：
- 服务器启动前扫描代码中用到的依赖
- 用Esbuild 对依赖代码进行预打包
- 改写 import 语法，指定依赖为预构建产物路径
五、Vite进阶路线 推荐学习顺序：
- 先了解基本使用、动手尝试各项常用配置;
- 然后学习其插件开发
为什么需要插件机制？
- 抽离核心逻辑
- 易于扩展
三、课后个人总结
我对vite不是很了解，只是在学vue3的时候看见老师讲过，这个是尤雨溪团队写的，比webpack更加便捷，走的是不一样的路，更加快速，但是老师只是一笔带过，最后我们还是用webpack。今天看到这个，更加深入的了解了一下vite，他的启动速度和热更速度快，简单易用，体验好，Vite给我最直观的印象就是响应迅速，开箱即用。
