Vite知识体系 | 青训营构建工具构建工具的意义模块化方案：提供模块加载方案兼容不同模块规范语法转译：高级

构建工具

构建工具的意义

模块化方案：

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

语法转译：

高级语法转译，如Sass、TypeScript
资源加载，如图片、字体、worker

产品质量：产物压缩、无用代码删除、语法降级

开发效率：热更新

Vite概要

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

组成部分

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

核心特征

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

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

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

基于原生Esbuild的编译性能优化

Esbuild，基于Golang开发的前端工具，具备：

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

性能极高，在Vite中被深度使用。

内置的Web构建能力

内置的Web构建能力.png

Vite上手实战

项目初始化

项目初始化.png

    npm i -g pnpm
    pnpm create vite
    pnpm install
    pnpm run dev

使用Sass/Scss & CSS Modules

    pnpm install sass -D

<!---->

    // index.tsx
    import React from "react";
    import styles from './index.module.scss';
    export function Header() {
      return <div className={styles.header}>Header</div>
    }

    // index.module.scss
    .header{
      color:red;
    }

    // App.tsx
    import {Header} from './components/Header'
    <Header></Header>

使用HMR

无需额外配置，自动开启。

生产环境Tree Shaking

优化原理：

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

"build": "tsc && vite build"中tsc编译进行类型的检查。

    // util.ts
    export const add = (a:number,b:number): number =>a+b;
    export const multi = (a:number,b:number): number =>a*b;

    // vite.config.ts
    export default defineConfig({
      plugins: [react()],
      build:{
        minify:false
      }
    })

    // index.tsx
    import styles from './index.module.scss';
    import { add } from "../../util";

    export function Header() {
      // return <div className={styles.header}>Header</div>
      return <div className={styles.header}>Head{add(1,2)}</div>
    }