这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天

前端构建工具的意义

模块化方案：

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

语法转译：

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

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

开发效率：热更新

Vite概览

定位：新一代前端构建工具

两大组成部分：

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

核心特征：

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

两大行业趋势

浏览器原生ESM支持

两大要素：

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

 <!-- index.html -->
 <script type="module">
     import {foo} from './foo.js'
     console.log(foo)
 </script>

 export const foo = 'foo'

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

• 无需打包项目源代码
• 天然的按需加载
• 可以利用文件级的浏览器缓存

Vite接收浏览器发起的请求，然后编译文件内容，返回给浏览器

基于Esbuild的编译性能优化

Esbuild——基于Golang开发的前端工具、具备如下能力：

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

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

使用Vite

项目初始化

 //提前安装 pnpm
 npm i -g pnpm
 //初始化命令
 pnpm create vite
 //安装依赖
 pnpm install
 //启动项目
 npm run dev

输入初始化参数

启动后截图

使用Sass/Scss&CSS Modules

目录结构：

引入Header组件

使用静态资源

以svg图片为例

除了常用的图片格式，Vite也内置了对于JSON、Worker、WASM资源的加载支持：cn.vitejs.dev/guide/featu…

生产环境Tree Shaking

优化原理：

1. 基于ESM的import/export语句依赖关系，与运行时状态无关
2. 在构建阶段将未使用到的代码进行删除

Tree Shaking在Vite中无需配置，默认开启

总结

Vite作为新出现的构建工具，具有高性能，简单易用的特点。构建方式也十分简便。