大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!
高级前端进阶
今天给大家带来的主题是Farm，即一个快速、强大、本地与生产环境保持一致的 Web 打包器，目标是解决 Vite 面临的主要问题。话不多说，直接开始！
1.Vite 的不足随着 web 项目规模的扩大，构建性能成为了开发者面临的主要问题。对于一个巨大的前端项目而言，使用 webpack 编译可能需要 10 分钟甚至更长时间，而热更新可能需要超过 10s，从而大大降低了前端开发的效率。
随着 vite 的出现，它在开发模式下使用原生的 ESM（即非打包模式） ，同时使用 esbuild 预打包依赖项，极大提升了应用开发服务器启动和热更新效率。但是非打包模式（Unbundled）并不完美，对于大型项目来说还是有很大的问题：
- 海量模块请求：对于一个大型项目，可能需要加载的模块有上千个，使用原生模块系统加载上千个模块会导致浏览器卡死甚至崩溃。
- Dev 和 Production 不一致：在大多数情况下，本地模块不能直接用于生产环境。 因此，非打包工具在生产环境中依然需要打包流程，从而导致 Dev、Production 不一致。当这种不一致导致生产错误时，调试起来非常麻烦、痛苦。 而 vite 选择在 dev 环境使用 esbuild，在 production 中使用 rollup，这进一步扩大了不一致性。
- Vite 在 dev 环境 之所以这么快，是因为 esbuild， esbuild 是用 go 编写的。 Go 利用了原生平台的优势，比 Js 快得多。
鉴于 Vite 的现状和面临的问题，Farm 认为，前端开发者需要一个快速、强大、本地/生产环境一致的 Web 打包器，从而解决 Vite 面临的问题。
其实，Farm 不仅仅是一个用 Rust 重写的普通打包器，它还包括很多强大和进步的设计。在性能方面，Vite 与其他工具的基准测试（使用 Turbopack 的基准测试，1000 个 React 组件）数据如下：
不论是在冷启动，热更新等方面，Farm 比 Webpack（纯 JS 打包）、Vite（本质也算 Rust 方案）、Turbopack（Rust 方案）、Rspack（Rust 方案，字节开源） 等都有显著的优势。
值得一提的是，Farm 的作者是 brightwu（吴明亮），曾就职于字节跳动和腾讯。 Farm 开源时间不到一年，在 Github 上已有 500 的 star，是一个值得持续关注的项目。
3.Farm 的设计理念- 性能至上：能用 Rust 编写的模块都用 Rust，只有少数不是性能瓶颈的部分沿用 JS
- dev/production 一致性：确保开发和生产完全一致，即在开发中看到的与在生产中得到的一样。
- 部分打包：Farm 的打包目标不是把所有东西都打包在一起，而是限制资源的请求数量。 Farm 会根据依赖关系和资源大小，将项目打包成 20-30 个小资源，在不损失缓存粒度的情况下获得最佳的资源加载性能。
- Web 资产的一等公民支持：Farm 不需要将所有内容转换为 Javascript，它将任何资源都视为一等公民，如 html、js/jsx/ts/tsx、css/scss、png/svg 等等都是 Farm 支持的基础模块，更多资源可以通过插件支持。
- 兼容性：Farm 适用于旧版 (ES5) 和现代浏览器。
- Rollup 风格的插件系统：易于创建自己的插件，并且易于从 rollup/vite/webpack 迁移插件/项目。
Farm 的目标是成为真正的下一代构建工具，快速、强大、多环境一致，并为 Web 开发人员提供最佳的开发体验。
4.使用 FarmFarm 需要 Node 16 及以上版本，如果开发者使用的是 Linux，请确保操作系统版本为 ubuntu 22 及以上（GLIBC >= 2.32）。
4.1 创建 Farm 项目@farmfe/cli 包提供创建、启动和构建 Farm 项目或 Farm 插件的能力。使用如下创建命令来初始化一个新的 Farm 项目。
npx @farmfe/cli@latest create
需要注意的是：create 命令目前只支持初始化一个简单的 React 项目，但是已经在逐步增强功能阶段。
4.2 开始项目首先执行 install 命令 ，可以选择喜欢的包管理器，npm 或 yarn 或 pnpm：
cd farm-react && npm install
// npm
cd farm-react && yarn
// yarn
cd farm-react && pnpm install
// pnpm
npm start
// 开始项目
直接通过浏览器访问地址 http://localhost:9000 即可开始。
4.3 配置项目该项目由项目根目录下的 farm.config.ts 文件配置，比如下面是 farm.config.ts 的内容：
import { defineConfig } from '@farmfe/core/dist/config';
export default defineConfig({
// 与编译相关的选项
compilation: {
input: {
//可以是相对路径或绝对路径
index: './index.html',
},
output: {
path: './build',
publicPath: '/',
},
// ...
},
// 与开发服务器相关的选项
server: {
port: 9000,
// ...
},
// 附加插件配置
plugins: [],
});4.4 Farm RoadMap
目前，Farm 已经实现了 Web 构建工具的基本功能， 但是要用于生产环境部署还有很多事情要做。
- Web 资产（html、css、js/Jsx/ts/tsx、静态资产等）的解析、加载、转换和资源生成。
- 懒编译
- Dev Server 和 HMR（支持快速响应）
- 部分打包
- Rust 和 Js 插件系统
- Source Map 支持
- Resources Minimize（暂未支持）
- Tree Shake（暂未支持）
- Css modules（暂未支持）
- 类 Sass 的官方插件（暂未支持）
- 持久缓存（暂未支持）
如上列表所示，目前 Farm 很多生产部署功能还依然在开发中，值得期待！
5.Farm 高级特性5.1 懒编译当涉及到一个大项目时，开发者可以拆分成小块并按需加载，这可以通过动态导入来实现。
const page = React.lazy(() => import('./page'));
// 懒加载
默认情况下，Farm 会延迟编译这些动态导入，只有在真正需要模块时才编译它们。
5.2 部分打包（Partial Bundling）回到 webpack，开发者经常使用 splitChunks 来拆分 bundle，试图优化资源加载时间和提高缓存命中率。 但是配置 splitChunks 很复杂，有时达不到想要的效果。
所以 Farm 引入了 Partial Bundling，根据依赖关系和资源大小自动将应用程序打包到多个资源中。
5.3 Static Assets 静态资源从 v0.4 Farm 开始支持三种资源加载方式： url, inline, raw 。下面是 url 模式:
import rocketUrl from './assets/rocket.svg'; // return the url of this image
export function Main() {
return <img src={rocketUrl} />; // using the url
}
使用 query ?inline 告诉 Farm 想要内联资产，然后资产将转换为 base64，例如：
// importer
import logo from './assets/logo.png?inline';
// logo is a base 64 str
// the image module
export default 'data:image/png,base64,xxxxx==';
例如，使用 ?raw 告诉 Farm 想要读取资产的原始字符串
// import
import logo from './assets/license.txt?raw';
// return the content string of the assets
// license.txt
export default 'MIT xxxx';5.4 script 脚本
Farm 支持开箱即用地编译 Js/Jsx/Ts/Tsx，默认将 Jsx/Tsx 编译为 React。
import Button from './Button';
function ButtonGroup(props: ButtonProps) {
return (
<div>
{props.buttons.map((b) => (
<Button>{b}</Button>
))}
</div>
);
}
默认情况下 Farm 使用 swc 来编译脚本，可以使用 compilation.script 修改配置。
6.本文总结本文主要和大家介绍Farm，即一个快速、强大、本地与生产环境保持一致的 Web 打包器，目标是解决 Vite 面临的主要问题。当然，正如文中所言，Farm的很多能力还在陆续开发、增强中，但是它目的非常明确，是一个值得长期关注的方案。
因为篇幅有限，文章并没有过多展开，如果有兴趣，文末的参考资料提供了优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！
参考资料https://farm-fe.github.io/docs/why-farm
https://github.com/farm-fe/farm
https://github.com/farm-fe/performance-compare
https://farm-fe.github.io/docs/features/static
https://farm-fe.github.io/docs/features/script
