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

一、本堂课重点内容：

深入双引擎
Vite 插件开发
代码分割(拆包)
JS 编译工具(Babel)
语法安全降级
服务端渲染(SSR)
深入了解底层标准

二、详细知识点介绍：

深入双引擎

Esbuild 和 Rollup 是两种常用的 JavaScript 打包工具。

Esbuild 是一个超快速的 JavaScript 打包工具，具有卓越的打包速度，兼容性和可配置性。它通过使用 Go 语言编写，并在编译时做出了一些优化，来加快打包速度。Esbuild 对于单页面应用和小型项目很有用。

Rollup 则是一个 JavaScript 模块打包器，支持使用 ES6 模块系统，并通过将模块合并为一个单独的文件来减小文件大小。它的特点是对每一个模块进行打包，支持 tree-shaking，并具有很强的插件生态系统，因此很适合大型项目。

Esbuild 和 Rollup 都是很好的打包工具，具体使用哪一个取决于你的项目的特殊需求。在选择时，应该考虑到项目的规模，打包速度，对插件的支持以及对模块系统的需求等因素。

Vite 插件开发

Vite 的插件机制非常强大，具有以下一些优势：

灵活性：Vite 的插件机制非常灵活，可以根据项目的特殊需求开发自己的插件，以满足项目的需求。
可扩展性：Vite 的插件机制可以方便地扩展项目的功能，提高项目的开发效率。
标准化：Vite 的插件机制遵循标准的插件开发规范，可以保证插件的质量和可用性。

代码分割(拆包)

代码分割，也称为拆包，是一种将 JavaScript 应用程序的代码分解成多个独立的文件的技术。目的是让浏览器在需要时才加载特定的代码，从而提高应用程序的加载速度和性能。

代码分割是在前端开发中很常见的优化技巧，主要用于减小首屏加载时间，提高用户体验。它可以帮助我们将大型 JavaScript 应用程序拆分为许多小的文件，这样当浏览器需要加载某个特定的功能时，只需要加载对应的代码，而不是加载整个应用程序。

通常，代码分割技术可以通过使用前端构建工具（如 Webpack 和 Rollup）和模块管理器（如 CommonJS 和 ECMAScript 模块）来实现。它们可以根据项目的需求，自动地将应用程序的代码分割为多个文件，以便浏览器可以按需加载

JS 编译工具(Babel)

Babel 是一个 JavaScript 编译器，用于将高级 JavaScript 语法转换为低级语法，以便兼容所有浏览器和环境。它是一个开源项目，可以通过多种方式使用，例如命令行工具、构建工具（如 Webpack 和 Rollup）、插件和集成开发环境（IDE）。

Babel 的主要目的是让开发人员可以使用最新的 JavaScript 语法和特性，而不用担心兼容性问题。它能够解决最新版本 JavaScript 语言的兼容性问题，并使得可以在任何浏览器和环境中运行。

Babel 的优势在于：

可以使用最新的 JavaScript 语法和特性：Babel 可以将最新版本的 JavaScript 语言转换为更早版本的语法，使得可以在所有浏览器中运行。
易于扩展：Babel 提供了许多插件，用于支持新的语法和特性，并且可以轻松添加新的插件。
易于使用：Babel 是一个开源项目，并且提供了丰富的文档和示例，可以帮助开发人员快速上手。
支持多种工具：Babel 可以在多种工具（如 Webpack 和 Rollup）中使用，并且可以通过命令行工具或插件直接使用。

语法安全降级

语法安全降级是指在构建产物中存在的代码安全问题，导致代码运行不正常，或者在生产环境中出现严重后果。这些问题通常是由于构建工具不正确使用或编译时出现错误造成的。

要避免语法安全降级，需要采取以下措施：

测试构建产物：在生产环境中测试构建产物是非常重要的，以确保代码正确运行，并且没有语法安全降级问题。
使用现代构建工具：使用最新的构建工具可以避免语法安全降级问题，因为它们已经通过了严格的测试，并且经过了大量的实际使用，可以提供更高的稳定性。
正确配置构建工具：构建工具必须正确配置，以避免语法安全降级问题。例如，可以使用代码检查工具（如 ESLint）来检查代码质量，以确保代码符合最佳实践。
实现代码复审：在代码提交到生产环境前，应该进行代码复审，以确保代码符合安全标准，并且没有语法安全降级

服务端渲染(SSR)

服务端渲染（SSR）是一种将网页在服务器端生成 HTML 的技术。当客户端请求一个页面时，服务器端会根据请求的 URL 生成一个完整的 HTML 页面，然后返回给客户端。客户端接收到这个页面之后，就可以直接展示给用户，而不需要再等待 JavaScript 文件的下载和执行。

这种技术在页面加载速度方面有很大的优势，因为它可以减少 JavaScript 文件下载和执行的时间，同时还可以提高搜索引擎优化（SEO）的效果。此外，在服务端渲染页面时，可以加载页面必要的数据，从而实现页面数据和布局的同时加载。

深入了解底层标准

"底层标准"是指在计算机科学和信息技术中的基本标准和协议，它们是构建和运行其他技术的基础。它们定义了通信协议，数据格式，编码方法等，以便让不同的计算机系统之间能够相互协作和通信。

例如，HTTP 和 HTML 是互联网应用的底层标准；TCP/IP 协议是计算机网络通信的底层标准；UTF-8 编码是字符编码的底层标准；CSS 和 JavaScript 则是网页开发的底层标准。

了解底层标准对于深入理解和开发技术非常重要，因为它们是构建高级技术的基础，也是解决技术问题的关键。

三、实践练习例子：

下面是一个简单的 Vite 插件示例，它将 CSS 文件转换为 JavaScript 模块：

import { createBabelTransformer } from 'vite'

export default function cssInJS(options = {}) {
  const transformer = createBabelTransformer(options)
  return {
    transform(code, id) {
      if (!/.css$/.test(id)) {
        return null
      }
      return transformer(
        `
        export default function() {
          const style = document.createElement('style')
          style.innerHTML = `${code}`
          document.head.appendChild(style)
        }
      `,
        id
      )
    },
  }
}

这个插件可以轻松地在 Vite 项目中使用，只需要在项目的 vite.config.js 中导入插件即可。

四、课后个人总结：

今日学习了关于前端开发的一系列知识，其中包括了Esbuild和Rollup双引擎，Vite插件开发的优势和构建，代码分割，Babel，语法安全降级，服务端渲染，以及Vite的社区生态。

对于Esbuild和Rollup双引擎，学习了它们的优势和适用场景，并了解了如何使用它们进行构建。了解了Vite插件开发的优势，以及如何使用它进行开发。

对于代码分割，了解了它的定义和原理，以及如何使用它进行构建。Babel的介绍帮助我们更好地了解代码转换的作用，而语法安全降级的概念则更加关注代码的安全性。

服务端渲染的概念让我们了解了如何使用服务端代码来生成客户端所需的页面，从而提高了网页的加载速度和用户体验。

Vite 进阶路线 ｜ 青训营笔记