一 . 前端工具的意义

• 模块化方案：

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

• 语法转译：

1. 高级语法转译，如 Sass, TypeScript
2. 资源加载，如图片，字体，worker

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

• 开发效率： 热更新

Vite概览

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

💡两大组成部分

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

核心特征

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

项目初始化

1. 安装 pnpm: pnpm i -g pnpm

2. 初始化命令：pnpm create vite

3. 安装依赖： pnpm install

4. 启动项目： npm run dev

二. 生产环境 Tree Shaking

优化原理：

1. 基于 ESM 的 import/export 语句依赖关系，与运行时状态无关

2. 在构建阶段将未使用到的代码进行删除

Vite 给你最直观的印象如何？

响应迅速，开箱即用。

依赖预打包

❓为什么要进行预打包？

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

⭐实现原理

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