本文基于Umi 设计思路之笔记，主要讲解了编译时框架和压缩工具有哪些？ 如果想更多请查看：Umi 设计思路

Umi 设计思路

• 编译时框架
• 插件体系
• 依赖预编译
• 默认快（Umi 4）
• 双构建引擎（Umi 4）
• 内外⼀致（Umi 4）（WIP）
• 集中式 vs. 组装式（Umi 4）（WIP）
• All In One（WIP）

编译时框架

- 初代前端

- 哪些是⼯具、编译时框架、运⾏时框架？

| 工具 |

运行时框架

|

编译时框架

| | —- | —- | —- | |
- Webpack
- Vite
- VueCli
- Babel
|
- React
- Vue
- Svelte （算是编译时框架）
|
- Umi
- Gastby
- Nuxt.js
- Next.js
- SvelteKit
- Astro
| | > 辅助开发，打包构建

| > 运行时框架是生产环境下是需要框架本身的支持，打包时需要将框架本身打到 bundle 中。

| > 编译时框架的是会根据你的源码 ⽣成辅助代码，运行时不需要框架本身的支持。

|

- Vite

— Vite 是什么？

- Snowpack

— Snowpack 是什么？

• Snowpack 是一款闪电般快速的前端构建工具，专为现代 Web 设计。 它是开发工作流程中更重、更复杂的打包程序（如 webpack 或 Parcel）的替代品。Snowpack 利用 JavaScript 的原生模块系统（称为 ESM）来避免不必要的工作，无论您的项目有多大，都能保持快速。

- Next.js

— 什么是 Next.js？

• Next.js 是一个轻量级的 React 服务端渲染应用框架。
• Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。

• Next.js 是一个轻量级的 React 服务端渲染应用框架，使用它可以快速上手开发 React 应用，而不是先花很多时间和精力去折腾构建、打包和运行等开发工具（Babel、webpack、状态管理、服务端渲染），NextJS 可以看作是 Create React App 的升级版。

  — Next.js 网站

• Next.js 官网

• Next.js 中官网

- Svelte

— 什么是 Svelte？

• Svelte 是一个构建 web 应用程序的工具。
• Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，但是有一个关键的区别：Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用，运行时不需要框架本身。

• Svelte 的核心思想在于『通过静态编译减少框架运行时的代码量』。举例来说，当前的框架无论是 React Angular 还是 Vue，不管你怎么编译，使用的时候必然需要『引入』框架本身，也就是所谓的运行时 (runtime)。但是用 Svelte 就不一样，一个 Svelte 组件编译了以后，所有需要的运行时代码都包含在里面了，除了引入这个组件本身，你不需要再额外引入一个所谓的框架运行时！

  — Svelte 网站

• Svelte 官网

• Svelte 中文网

  — 推荐文档

• 我为什么选择 Svelte 来开发我们的官网

• 尤雨溪这样评价svelte

- SvelteKit

— 什么是 SvelteKit？

• 正如 React 之于 Next，Svelte 对应的 Web 框架便是 SvelteKit。
• 它是一个用 Svelte 构建利用的框架，包含服务器端渲染（SSR）、路由、针对 JS 和 CSS 的代码宰割，以及针对不同 Serverless 平台生成不同代码的适配器等等。
• SvelteKit 是一个基于 vite 的 SSR 工程，基本 0 配置。

• 如果你曾有 Sapper 开发教训，那么 SvelteKit 正是它的继任者。

  — SvelteKit 网站

• 官网

- umi

— umi 是什么？

• 插件化的企业级前端应用框架

  — umi 特点？

• 约定式路由： 就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置

• 插件：插件预设、国际化 、数据流 、权限 、样式定义 、assets 、icons 、布局 、请求 …

• Low Import 开发模式

  — umi 网站

• umi 官网

压缩工具

- esbuild

— esbuild 是什么？

• esbuild 是一个 「JavaScript」 的打包和和压缩工具，它可以将「JavaScript」和「TypeScript」代码打包分发在网页上运行。

• esbuild 使用 golang 开发，在打包的速度上非常快，我们熟悉的vite工具在dev模式下就是使用esbuild进行打包。

  — esbuild 特点

• 用「Go」语言编写，无需缓存即可达到极速

• 用于 JavaScript 和 Go的 API
• 支持 ES6 和 CommonJS 模块
• 支持 ES6 的 Tree shaking
• 支持 TypeScript 和 JSX 语法
• Source Map
• 定义插件
• 代码压缩

• 加载器

  — esbuild 总结

• 根据 Go 语言的特性，esbuild 解析，生成最终打包文件和生成 source maps 的操作全部完全并行化。

• esbuild 对构建流程进行了优化，充分利用 CPU 资源。
• 尽量少传递 全AST 以获得更好的缓存局部性。
• 当然 esbuild 不是万能的，由于其为了保证编译效率，并没提供 AST 的操作能力，所以对一些处理 AST 的 plugin（如 babel-plugin-import） 暂时不能过渡到 esbuild 中。

• esbuild 针对构建 应用 的重要功能仍然还在持续开发中 —— 特别是代码分割（可以获得最佳的加载性能）和 CSS 处理方面。当未来这些功能稳定后，不排除使用 esbuild 作为生产构建器的可能。

  — Go vs JavaScript

• Go 语言与 JavaScript 语言差异（webpack 采用 JavaScript；esbuild 采用 Go）

• Go 则是纳秒级，而 JS 的操作是毫秒级
• Go 是为并行性而设计的，而 JavaScript 是单线程的
• Go 在线程之间共享内存，而 JavaScript 必须在线程之间序列化数据
• Go 可直接编译成机器码，不依赖其他库，必然比 JIT 快（JIT相关看这里）

• Go 和 JavaScript都有并行的垃圾收集器，但是Go的堆在所有线程之间共享，而对于JavaScript, 每个JavaScript线程中都有一个单独的堆。根据测试，这似乎将 JavaScript worker 线程的并行能力减少了一半，大概是因为一半CPU核心正忙于为另一半收集垃圾。

  — esbuild 网站

• esbuild官网

• 不懂就问 」 为什么 esbuild 这么快 ？
• esbuild完整学习
• 新一代打包工具esbuild
• 下一个时代的打包工具 esbuild
• 前端打包工具Esbuild—模块化、ESM、esbuild-loader

- swc（编译工具）

— swc 是什么？

• swc 是一个用 Rust 写的高性能 TypeScript / JavaScript 转译器，类似于 babel。是babel last 实现，是一个编译工具。
• SWC 在单线程上比 Babel 快 20倍，在四核上比 Babel 快70 倍。
• SWC 是一个可扩展的基于 Rust 的平台，用于下一代快速开发人员工具。Next.js、Parcel 和 Deno 等工具以及 Vercel、ByteDance、腾讯、Shopify 等公司都在使用它。

• SWC 可用于编译和捆绑。对于编译，它需要使用现代 JavaScript 功能的 JavaScript / TypeScript 文件，并输出所有主要浏览器都支持的有效代码。

  — swc 网站

• swc 官网

• swc git仓库
• [Rust] 初步认识 swc

- terser

— terser 是什么？

• 代码压缩插件，支持ES6+语法

• TerserWebpackPlugin 使用 terser 来压缩 JavaScript

  - uglifyJs

  — uglifyJs 是什么？

• 代码压缩插件，不支持ES6语法

• …

cssnano

— cssnano 是什么？

• cssnano 是一个现代的模块化压缩工具，写在 PostCSS 生态系统之上，它允许我们使用许多强大的功能来适当地压缩 CSS。