01浅谈构建工具
前端为什么需要构建工具？
前端工程的痛点：
- 模块化
- 资源编译 浏览器的标准赶不上前端开发者
- 产物质量 线上的代码需要压缩，否则影响代码性能，以及考虑兼容性问题
- 开发效率 改动代码后立刻看到效果等
前端构建工具的意义
- 模块化方案
-
提供模块加载方案
-
兼容不同模块规范
- 语法转译
-
高级语法转译，如Sass、TypeScript
-
资源加载，如图片、字体、worker
- 产物质量
产物压缩、无用代码删除、语法降级
- 热更新
开发效率
02 Vite概要介绍
Vite是什么？
定位：新一代前端构建工具
两大组成部分:
1.No-bundle开发服务，源文件无需打包
2.生产环境基于Rollup的Bundler
核心特征
1.高性能，dev启动速度和热更新速度非常快
2.简单易用，开发者体验好
传统构建工具存在的问题
-
启动缓慢，项目编译等待成本太高
-
热更新缓慢，修改代码后不能实时更新
瓶颈
- bundle带来的性能开销
- JavaScript的性能瓶颈
03 Vite 上手实战
- 项目初始化
下图为我启动后的截图
进入http://localhost:5173/ 页面展示 启动成功
- 使用Sass/Scss & CSS Modules 编写新组件，引入样式
import React from "react"
import styles from './index.module.scss'
export function Header()
{
return <div className={styles.header}>Header</div>
}
页面实时更新：
-
使用静态资源
-
使用HMR
-
生产环境Tree Shaking
无用代码的删除
优化原理︰
1.基于ESM的import/export 语句依赖关系，与运行时状态无关
2.在构建阶段将未使用到的代码进行删除
（Tree Shaking在 Vite中无需配置，默认开启）
- Vite最直观的印象：响应迅速、开箱即用
04 Vite整体架构
- 关键技术：单文件编译
用Esbuild编译TS/JSX
优势:编译速度提升10-100 x
局限性:
不支持类型检查
不支持语法降级到ES5
- 关键技术：代码压缩
Esbuild 作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
- 关键技术：插件机制
开发阶段->模拟Rollup 插件机制
生产环境->直接使用Rollup
05 Vite进阶路线
这里讲了一些学习的方法和思路，对前端工程化有更深入的认知。
- 深入双引擎：Esbuild rollup.js
推荐学习顺序：先了解基本使用，动手尝试各项常用配置﹔然后学习其插件开发。
- Vite插件开发
为什么需要插件机制？
抽离核心逻辑
易于拓展
推荐学习：先看文档,过一遍插件钩子的功能，然后多学习其它插件的实现，掌握套路
- 拆包
- babel
- 语法安全降级
- 服务端渲染（SSR）
- 深入了解底层标准
- Vite社区生态
