Vite知识体系（上）

这是我参与第五届青训营 伴学笔记创作活动的第18天。

课程重点

浅谈构建工具
vite概要介绍
vite上手实战

详细知识点

浅谈构建工具

为什么需要构建工具？

需要考虑：

模块化：ESM、CommonJS、UMD
资源编译：高级语法的编译
产物质量：代码体积、代码性能
开发效率：热更新

前端构建工具的意义：

vite概要介绍

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

两大组成部分：

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

核心特征

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

当下问题：

缓慢的启动：项目编译等待成本高。
缓慢的热更新：修改代码后不能实时更新。
瓶颈：bundle带来的性能开销，js语言的性能瓶颈。

两大行业趋势：

全球浏览器对原生ESM的普遍支持(目前占比92%以上)
基于原生语言(Go、Rust)编写前端编译工具链，如Go语言编写的Esbuild、Rust编写的SWC.

浏览器原生ESM支持

两大要素：

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

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

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

基于Esbuild的编译性能优化 Esbuild是基于Golang开发的前端工具，性能极高，在Vite中被深度使用，具备以下能力：

打包器Bundler
编译器Transformer
压缩器Minifier

vite上手实战

项目初始化

目录结构

自定义的Header组件

import style from './css/index.module.scss'
export function Header(){
    return <p className={style.header}>页头</p>
}

index.module.scss

.header{
    background-color: aliceblue;
    color:aqua;
    font-size: 36px;
    font-weight: bold;
}

App.tsx中引入Header组件

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import { Header } from './components/header'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <Header/>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  )
}

export default App

项目打包

vite给人的直观印象：响应迅速、开箱即用。

Vite知识体系（上）| 青训营笔记