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

我将创作一些 Vite 学习相关的笔记。

《Vite 知识体系》笔记 Vol. 1

构建工具

为什么需要构建工具

前端核心要素——资源

主要问题：

• 模块化：ESM, CommonJS, UMD
• 资源编译：高级语法的编译
• 产物质量：代码体积、代码性能
• 开发效率：热更新

前端构建工具的意义

• 模块化方案

  • 提供模块加载方案
  • 兼容不同模块规范

• 语法转译

  • 高级语法转译
  • 资源加载，如图片、字体、worker

Vite 概要介绍

Vite 概览

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

两大组成部分：

• No-bundle开发服务，原文件无需打包
• 生产环境基于Rollup的Bundler

核心特征：

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

Vite 与 esbuild

Vite 使用 esbuild 预捆绑依赖

esbuild 为什么快：

1. 使用Go编写

   • 其他构建工具用JS（动态语言），在命令行下的性能糟糕，无优化措施；esbuild用Go（静态语言），已经编译成了可直接执行的机器码

   • Go是为并发而设计的语言

     • Go在线程之间共享使用内存空间
     • Go在线程之间共享堆，用于垃圾回收

2. 大量使用并行算法

3. esbuild所有内容从零编写，一开始就考虑到性能

4. 更有效利用内存

   • esbuild通过减少AST遍历次数，来减小内存访问速度对打包速度对影响
   • Go可以把数据更加紧凑地存储在内存中

Vite 上手使用

脚手架搭建

通过 NPM

npm create vite@latest

通过 PNPM

pnpm create vite

然后顺着提示操作即可；或者直接在命令行中指明你想要的项目名称和你想要使用的模板，例如

通过 NPM

npm create vite@latest my-vue-app -- --template vue

通过 PNPM

pnpm create vite my-vue-app --template vue

create-vite 目前支持这些模板： vanilla, vanilla-ts, vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts

社区模版

本人推荐 @antfu 的模版 vitesse

npx degit antfu/vitesse my-vitesse-app
cd my-vitesse-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm