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

Vite

为什么需要构建工具

前端工程的痛点

在前端开发中，有诸多核心要素---资源，例如：JS,TS,JSX,CSS,SCSS,LESS,PNG,JPEG,WEBP.....

我们需要一种方式来较好地对它们进行管理

前端构建工具的意义

• 模块化方案
  • 提供模块加载方案
  • 兼容不同模块规范
• 语法转译
  • 高级语法转译，如Sass，TypeScript
  • 资源加载，如图片，字体，worker
• 产物质量
  • 产物压缩，无用代码删除
  • 语法降级
• 开发效率
  • 热更新

简述Vite

Vite概览

1. 定位： 新一代前端构建工具
2. 两大组成部分：
   1. No-bundle开发服务，源文件无需打包
   2. 生产环境基于Rollup的Bundler
3. 核心特征：
   1. 高性能，dev启动速度和热更新速度非常快！
   2. 简单易用，开发者体验好

两大行业趋势

1. 全球浏览器对原生ESM的普遍支持（目前占比92%之上）
2. 基于原生语言（Go,Rust）编写前端编译工具链
   • 如Go语言编写的Esbuild，Rust编写的SWC

在浏览器中原生ESM支持

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

Vite好处

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

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

2. 基于Esbuild的编译性能优化

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

   • 打包器 Bundler
   • 编译器 Transformer
   • 压缩器 Minifier

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

3. Vite开箱即用的功能等价于

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

Vite上手使用

项目初始化

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

Vite的好处

• 响应迅速
• 开箱即用

Vite整体结构

关键技术:

• 依赖预打包
• 单文件编译
• 代码压缩
• 插件机制

总结

本文主要简述了前端痛点，vite的基本概念及使用，以及对vite整体结构的初识。