前端Vite知识体系 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第13天

内容大纲：

1. 浅谈构建工具
2. Vite概要介绍
3. Vite上手实战
4. Vite整体架构
5. Vite进阶路线

为什么需要构建工具

前端工程的痛点

前端构建工具的意义

Vite是什么？Why Vite

Vite概览

当下问题

两大行业趋势

浏览器原生ESM支持

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

基于Esbuild的编译性能优化

内置的Web构建能力

Vite 开箱即用的功能等价于

• webpack
• webpack-dev-server
• css-loader
• style-loader
• less-loader sass-loader
• postcss-loader
• file-loader
• MiniCssExtractPlugin
• HTMLWebpackPlugin

那么我们如何使用Vite呢

Vite上手使用

项目初始化

使用Sass/Scss & CSS Modules

使用静态资源

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

使用HMR

生产环境Tree Shaking

Vite给你最直观的印象如何

• 响应迅速
• 开箱即用

Vite整体架构

关键技术：依赖预打包

关键技术：单文件编译

关键技术：代码压缩

关键技术：插件机制

插件兼容性具体可查阅：vite-rollup-plugins.patak.dev/

Vite进阶路线

深入双引擎

参考资料：rollupjs.org/guide/en/

Vite插件开发

为什么需要插件机制？

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

插件示例

参考资料： github.com/vitejs/vite… cn.vitejs.dev/guide/api-p… github.com/vitejs/vite…

代码分割（拆包）

参考资料： cn.vitejs.dev/config/buil… rollupjs.org/guide/en/#o…

JS编译工具（Babel）

参考资料： babeljs.io/docs/en/ github.com/jamiebuilds…

语法安全降级

参考资料： babeljs.io/docs/en/bab… github.com/vitejs/vite…

服务端渲染（SSR）

深入了解底层标准

参考资料：

hacks.mozilla.org/2018/03/es-… antfu.me/posts/publi… gist.github.com/sindresorhu…

Vite社区生态

• Github 40k+star(可参考webpack61.3K，rollup21.8k)，并且目前还在持续维护
• 官方提供插件:
• @vitejs/plugin-vue，提供Vue3支持
• @vitejs/plugin-vue-jsx提供Vue 3JSX支持
• @vitejs/plugin-react，提供React支持
• @vitejs/plugin-legacy提供低版本浏览器降级支持 海量社区插件：github.com/vitejs/awes…