Vite进阶学习笔记｜青训营

Wants
93 阅读6分钟

抽一点时间整理下青训营笔记、相信课程笔记对于刚入门的伙伴会受益匪浅

我的小破站：gavinking.top

讲师：杨兴元

为什么需要构建工具？

因为它们可以显著提升开发效率、代码质量和项目的可维护性。 以下是一些需要构建工具的主要原因：

  1. 模块化开发： 在大型项目中，代码通常分为多个模块，构建工具可以将这些模块分开管理，使代码更具可读性和可维护性。
  2. 代码拆分： 构建工具可以自动拆分代码，按需加载，从而减少初始加载时间，提高页面性能。
  3. 自动化任务： 构建工具可以自动执行各种任务，如代码压缩、合并、语法检查、图片优化等，减少手动操作的时间和错误。
  4. 代码转换： 构建工具可以将新一代的JavaScript（如ES6、TypeScript）等转换为能够在现有浏览器中运行的旧版JavaScript。
  5. 样式预处理器： 构建工具支持使用CSS预处理器（如Sass、Less）编写更具可维护性和复用性的样式。
  6. 依赖管理： 构建工具可以管理项目的依赖，从包管理器（如npm、Yarn）中获取所需的库和框架。
  7. 自动化测试： 构建工具可以集成自动化测试框架，使得开发者可以更方便地进行单元测试、集成测试等。
  8. 性能优化： 构建工具可以自动进行性能优化，如代码压缩、图片优化、懒加载等，提高应用性能和用户体验。
  9. 跨平台兼容性： 构建工具可以处理不同平台、浏览器和设备的兼容性问题，确保应用在各种环境中正常运行。
  10. 开发环境配置： 构建工具可以配置开发环境，提供实时预览、热重载等功能，加快开发速度。

总之，构建工具在前端开发中扮演着自动化和提高效率的角色。可以帮助开发者优化代码、管理依赖、提供开发环境，并使得项目更易于维护、测试和部署。 image.png

Vite什么是？Why Vite？

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

两大组成部分：

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

Vite 是一种现代化的前端构建工具，它旨在提供更快的开发体验和更高的性能。与传统的构建工具不同，Vite 不采用打包的方式，而是利用浏览器原生 ES 模块的支持，实现了快速的开发和构建过程。以下是 Vite 的一些主要特点和优势：

  1. 快速的开发服务器： Vite 使用 ES 模块作为原生资源引入，无需提前构建，因此启动开发服务器速度极快。在开发过程中，Vite 会根据需要动态加载模块，避免了传统构建工具打包的繁琐过程。
  2. 即时热更新： Vite 支持即时热更新，无需刷新页面即可在代码发生变化时立即查看更新效果。这可以大大提高开发效率。
  3. 原生 ES 模块支持： Vite 利用浏览器原生支持的 ES 模块，避免了传统构建工具中使用 CommonJS 或 AMD 的模块系统带来的性能问题。
  4. 轻量级打包： 在生产环境下，Vite 会对代码进行轻量级的打包，以便进行优化和压缩，从而减少构建时间。
  5. 按需引入： Vite 支持按需引入库，只加载你的应用所需的部分，从而减少加载时间和资源占用。
  6. 多种开发语言支持： Vite 不仅支持 JavaScript，还支持 TypeScript、Vue、React 等框架的开发。
  7. 插件生态： Vite 提供了丰富的插件生态，可用于处理样式、图片、路由等各种需求。
  8. 简单配置： Vite 的配置相对简单，只需要一个 vite.config.js 文件即可进行基本的配置。

image.png

核心特征

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

当下问题

esbuild

  • 基于原生语言（Go、Rust）编写前端编译工具链
  • 如Go语言编写的Esbuild、Rust编写的SWC
  • 全球浏览器对原生ESM的普遍支持
    • 两大要素
      • 1.script标签增加type='module'属性
      • 2.使用ESM模块导入导出语法 基于原生ESM的开发服务优势
  • 无需打包项目源代码
  • 天然的按需加载
  • 可以利用文件级的浏览器缓存

基于Esbuild的编译性能优化 ————基于 Golang 开发的前端工具，具备如下能力：

  1. 打包器 Bundler
  2. 编译器 Transformer 性能极高，在 Vite中被深度使用
  3. 压缩器 Minifier

内置的 Web 构建能力

Vite 开箱即用的功能等价于

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

上手使用 Vite，项目初始化

#提前安装 pnpm

npm i -g pnpm

#初始化命令

pnpm create vite

#安装依赖

pnpm install

#启动项目

npm run dev

Vite 整体架构

为什么要进行预打包？

  1. 避免 node_modules 过多的文件请求
  2. 将 CommonJS 格式转换为 ESM 格式

实现原理

  1. 服务启动前扫描代码中用到的依赖
  2. 用 Esbuild 对依赖代码进行预打包
  3. 改写 import语句，指定依赖为与构建产物路径

image.png

关键技术：

  1. 单文件编译

用 Esbuild 编译 TS/JSX
优势：编译速度提升 10-100x 局限性：不支持类型检查 不支持语法降级到 ES5

  1. 代码压缩

image.png

  1. 插件机制

image.png

Vite 进阶路线

推荐学习顺序：

  • 先了解基本使用，动手尝试各项常用配置；
  • 然后学习其插件开发。

参考资料： Esbuild 官方文档 Rollup 官方文档

为什么需要插件机制？

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

image.png

参考资料：

Vite 插件开发文档

复杂度较低的插件：json 加载插件

复杂度中等的插件： Esbuild 接入插件

复杂度较高的插件：官方 React 插件

image.png

JS 编译工具（Babel） 出现的原因：

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

参考资料： babel官方站点

babel 插件手册

语法安全降级、服务端渲染（SSR）

image.png

image.png

avatar
文章
阅读
粉丝