这是我参与【第五届青训营】笔记创作活动的第十二天

2023.02.10

问题01.为什么需要构建工具？

• 模块化方案：
  • 提供模块加载方案
  • 兼容不同模块规范
• 语法转译：
  • 高级语法转译，如Sass、TypeScript
  • 资源加载，如图片、字体、worker
• 产物质量：产物压缩、无用代码删除、语法降级
• 开发效率：热更新

02.概览

• 定位：新一代前端构建工具
• 两大组成部分：
  • 1.No-bundle开发服务，源文件无需打包
  • 2.生产环境基于Rollup的Bundler
• 核心特征：
  • 高性能，dev启动速度和热更新速度非常快！
  • 简单易用，开发者体验好

03.如何使用

• 项目初始化

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

• 使用静态资源

  • //目录结构
    src
    	App.css
    	App.tsx
    	components
    		Header
    			index.module.scss
    			index.tsx
    	favicon.svg
    	index.css
    	logo.svg
    	main.tsx
    	vite.env.d.ts
    

• 使用HMR

• 生产环境Tree Shaking

04.整体架构

• 单文件编译：用Esbuild编译TS/JSX
  • 优势：编译速度提升10-100x;
  • 局限性：不支持类型检查；不支持语法降级到ES5。
• 代码压缩：Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
• 插件机制：
  • 开发阶段 -> 模拟Rollup插件机制
  • 生产环境 -> 直接使用Rollup