Vite 普及 | 青训营

落尘69
178 阅读3分钟

构建工具的作用

- 模块化：ESM、CommonJS、UMD

构建工具能够提供模块加载方案，以兼容不同的模块规范

- 资源编译：高级语法的编译

构建工具能够实现高级语法的转译，如Sass、TypeScript等，优化资源加载，如图片、字体等

- 产物质量：代码体积、代码性能

构建工具能够压缩产物，删除无用代码，实现语法降级，提高兼容性

- 开发效率：热更新

构建工具能够热更新来提高开发时的体验，修改代码后的实时更新

Vite 概要

两大组成

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

核心特征

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

Vite 操作

项目初始化

// 初始化命令
pnpm create vite
// 安装依赖
pnpm install
// 启动项目
pnpm run dev
  • 添加 Sass 依赖

-D 是指将当前依赖作为 dev 时候的依赖加载

pnpm i sass -D

Sass 相较于 CSS 能够使用样式嵌套的写法

<div className={style.header}>
  Header
  <p className={style.content}>Hello World</p>
</div>

<style>
.header {
  .content {
    color: skyblue;
  }
  color: red;
}
</style>

静态资源加载

除了常见的图片格式，Vite 内置了对 JSON、Worker、WASM 资源的加载支持

import reactLogo from './assets/react.svg'

function App() {
  return (
    <div>
      <a href="https://react.dev" target="_blank">
        <img src={reactLogo} className="logo react" alt="React logo" />
      </a>
    </div>
  )
}

生产环境 Tree Shaking

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

Vite 整体架构

  • 单文件编译：使用 Esbuild 对依赖进行预打包和对单文件的编译，使编译速度得到极大的提高，但是 Esbuild 不支持类型检查和将语法降级到 ES5
  • 压缩机制：使用 Esbuild 对代码进行压缩，相比于其他的压缩工具时间大大地缩短
  • 插件机制：在开发阶段使用 Plugin Container 模拟 Rollup 的插件机制，而在生产环境之间使用 Rollup

Vite 进阶路径

深入双引擎

从了解和掌握基本使用各种常用配置项到能够进行其插件的开发

Vite 插件开发

抽离核心逻辑，易于拓展

可以基于如下 Hook，实现在不同的构建阶段插入自定义的逻辑

image.png

  • 如下是将一个自定义的文件内容进行编译，并将编译内容返回给 vite
// myPlugin.js
const fileRegex = /.(my-file-ext)$/

export default function myPlugin() {
  return {
    name: 'transform-file',
    transfrom(src, id) {
      if (fileRegex.test(id)) {
        return {
          code: compileFileToJS(src),
          map: null
        }
      }
    }
  }
}

// vite.config.js
import { defineConfig } from 'vite'
import plugin from './myPlugin'

export default defineConfig({
  plugins: [
    plugin()
  ],
})

服务端渲染

SSR (Server Side Render) 是一种渲染模式，常用于提升首屏性能和 SEO 优化

  • 首屏加载慢：首屏加载需要依赖 JS 的执行，尤其是在一些网络不佳的场景，下载和执行 JS 时运行过慢，导致首屏加载时间过长

  • SEO 不友好：具体的内容没有在 HTML 中显示出来，导致搜索引擎爬虫无法快捷地从网站爬取关键词信息

    通过运用 SSR，可以实现在服务端生成好完整的 HTML 内容，直接返回给浏览器，这样浏览器就能够根据 HTML 直接渲染出首屏的内容，而不需要再依赖于 JS 的加载，从而降低首屏渲染的时间以及展现完整的内容给浏览器爬虫

语法降级

解决方案： @vitejs/plugin-legacy

其借助了 Babel 进行语法的自动降级，提前注入 Polyfill 实现，如：core-js、regenerator-runtime

avatar
文章
阅读
粉丝