为什么需要构建工具？

前端工程的痛点

前端构建工具的意义

模块化方案

1. 提供模块加载方案
2. 兼容不同模块规范

语法转译

1. 高级语法转译，如Sass、Typescript
2. 资源加载，如图片，字体，worker

产物质量

产物压缩、无用代码删除、语法降级

开发效率

热更新

Vite概览

• 定位：新一代前端构建工具
• 两大组成部分：

1. No-bundle开发服务，源文件无需打包
2. 生产环境基于Rollup的Bundler

• 核心特征

1. 高性能，dev启动速度和热更新速度非常快
2. 简单易用，开发者体验好

两大行业趋势

浏览器原生ESM支持

两大要素

1. script标签加type=“module”属性
2. 使用ESM模块导入导出语法

基于原生ESM的开发服务优势

基于Esbuild的编译性能优化

• Esbuild-基于Golang开发的前端工具，具备如下能力：

1. 打包器Bundler
2. 编译器Transformer
3. 压缩器Minifier

• 性能极高，在Vite中被深度使用

内置的Web构建能力

Vite插件开发

为什么需要插件机制？

• 抽离核心逻辑
• 易于拓展

Vite插件开发

代码分割(拆包)

JS编译工具(Babel)

出现原因

• JavaScript的语法标准繁多，浏览器支持程度不一
• 开发者需要用到高级语法

语法安全降级

服务端渲染(SSR)

深入了解底层标准