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

Webpack知识体系 ｜ 青训营笔记

本堂课重点内容：

1. 为什么需要构建工具
2. Vite是什么？Why Vite？
3. 如何使用Vite？
4. Vite整体架构

1.为什么需要构建工具

需要管理多个资源。

2. Vite是什么？Why Vite？

• 定位：新一代前端构建工具
• 两大组成部分

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

• 核心特征

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

当下问题

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

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

3.如何使用Vite？

3.1 项目初始化

// 安装pnpm
npm i -g pnpm
// 初始化命令
pnpm create vite
// 安装依赖
pnpm install
// 启动项目
npm run dev

3.2 使用Sass/Scss & CSS Modules

• 安装Sass

pnpm i sass -D

组件Header

• index.tsx

import styles from './index.module.scss';
export function Header() {
    return <p className={styles.header}> Header </p>
}

• index.module.scss

.header {
    color: red
}

• scr目录结构

App.tsx

import { Header } from './components/Header';
function App() {
    return {
        <div><Header /></div>
    }
}
export default App;

4.Vite整体架构

1.为什么要预打包？

1. 避免node_modules过多的文件请求
2. 将CommonJS格式转换成ESM格式

• 实现原理

1. 服务启动前扫描代码中用到的依赖
2. 用Esbuild对依赖代码进行预打包
3. 改写import语句，指定依赖为预构建产物路径

// 改写前
import React from 'react'
// 改写后
import React from '/node_modules/.vite/react.js'

2.单文件编译

用Esbuild编译TS/JSX 优势：编译速度提升10-100x 局限性：

• 不支持类型检查
• 不支持语法降级到ES6

3.代码压缩

Esbuild 作为默认压缩工具，替换传统的 Terser、Uglifyjs 等压缩工具

4.插件机制

开发阶段 -> 模拟Rollup插件机制 生产环境 -> 直接使用Rollup