初识前端构建工具 Vite | 青训营笔记

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

一、为什么需要构建工具

Vite 概览 定位:新一代前端构建工具

• 两大组成部分:

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

• 核心特征

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

当下瓶颈：

• bundle 带来的性能开销。
• JavaScript 语言的性能瓶颈。

两慢：

1. 缓慢的启动->项目编译等待成本高
2. 缓慢的热更新->修改代码后不能实时更新

Vite 概要介绍

浏览器原生 ESM 支持

• 两大要素：

  • Script 标签增加 type = "module"属性
  • 使用 ESM 模块导入导出语法

• 原生 ESM 的开发服务优势

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

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

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

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

内置的 Web 构建能力：

Vite 开箱即用的功能等价于

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

......

Vite 上手实战

Vite 项目初始化 启动完成后，打开浏览器访问对应地址即可

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

Vite 最直观的印象:

• 响应迅速
• 开箱即用

Vite 整体架构

关键技术 : 单文件编译 - 用 Esbuild 编译TS/Sx 。

优势 : 编译速度提升开 10 - i 一局限性 - 不支持类型检查，不支持语法降级到 ES5 。

Esbuild 作为默认压缩工具，替换传统的 Terser、Uglify.js 等压缩工具。

Vite 进阶路线

Vite 插件开发 （为什么需要插件机制?）

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

JS 编译工具 - Babel

出现的原因 ：

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

语法安全降级：

如何在构建产物中避免这类问题?

• 上层解决方案: @vitejs / plugin-legacy
• 底层原理
  • 借助 Babel 进行语法自动降级。
  • 提前注入 Polyfill 实现，如 core-js 、 regenerator-runtime 。

结尾

综上，今天又是学习的一天呢！😊