Vite|青训营

之前有粗略的学过Webpack，毕竟现在Webpack的地位也是挺稳定的，但是有时候看视频或文章学习过程中，很多人选用了Vite，当第一次使用的时候，第一印象就是真快，那今天就来总结一下Vite吧。

前端构建工具的意义

• 模块化方案

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

• 语法转义

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

• 产物质量

  • 产物压缩，无用代码删除
  • 语法降级

• 开发效率

  • 热更新

什么是Vite

• 新一代前端构建工具

• 两大组成部分

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

• 开箱即用，响应迅速

• 核心特征

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

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

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

Esbuild

基于Golang开发的前端工具，具备以下能力：打包器Builder、编译器Transformer、压缩器Minifier

生产环境 Tree Shaking（在vite中无需配置，默认开启）

优化原理：

1. 基于ESM的import/export语句依赖关系，与运行时状态无关
2. 在构建阶段将未使用到的代码进行删除。

用Esbuild编译TS/JSX

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

语法安全降级

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

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

服务端渲染（SSR）

是一种将动态生成的页面在服务器端进行渲染并将最终渲染结果发送到客户端的技术。相比于传统的客户端渲染（CSR，Client-Side Rendering），SSR 提供了一些优势和用途。

优势：

1. 搜索引擎优化（SEO）：由于搜索引擎爬虫通常只能读取和索引静态 HTML 内容，SSR 可以在服务器端将动态生成的页面渲染为完整的 HTML，并直接提供给搜索引擎进行索引。这使得搜索引擎更容易理解和索引您的网站内容，从而提高 SEO 的效果。
2. 更快的首次加载时间：在 CSR 中，浏览器首先下载 HTML 文件，然后再通过执行 JavaScript 代码来生成和渲染页面内容。而在 SSR 中，服务器已经将页面渲染为完整的 HTML，并直接发送给客户端，因此用户可以更快地看到初始渲染的页面内容，提供更好的用户体验。
3. 更好的性能表现：尽管 SSR 的初始加载时间可能会比 CSR 稍长，但一旦初始页面加载完成，后续的页面切换和导航通常会更快，因为服务器已经提供了渲染好的 HTML，不再需要执行大量的客户端 JavaScript 代码。
4. 支持社交媒体分享和链接预览：由于 SSR 提供了完整的 HTML 页面，社交媒体网站（如 Facebook、Twitter）可以直接抓取页面内容，生成预览卡片，方便分享和链接展示。
5. 更好的可访问性和可持续性：SSR 使得您的网站在不支持 JavaScript 或 JavaScript 被禁用的环境中仍然可访问，并提供更好的可持续性。

需要注意的是，SSR 也有一些考虑因素和挑战，包括服务器负载的增加、对后端代码的要求、缓存管理等。此外，SSR 适用于那些需要搜索引擎优化、首次加载性能和更好用户体验的场景，对于一些复杂的交互和动态内容，CSR 仍然是一个合适的选择。

综上所述，SSR 提供了许多好处，包括更好的 SEO、更快的初始加载时间、更好的性能表现以及更好的可访问性和可持续性。但在选择使用 SSR 时，需要根据具体场景和需求进行权衡和决策。