🚀🚀🚀 不要只知道 Vite 了,可以看看 Farm ,Rust 编写的快速且一致的打包工具

前言

昨天的文章中,我们提到了 Farm 这个打包工具,今天我详细介绍下这个工具!

往期精彩推荐

正文

什么是 Farm

Farm 是一个用 Rust 编写的 Web 构建工具,旨在为开发者提供极致的性能和一致性体验。它解决了传统构建工具在处理大型 Web 项目时速度缓慢的问题,同时也弥补了新一代工具如 Vite 在某些方面的不足!

Farm 通过高效的增量构建和部分打包策略,显著提升了构建效率!

Farm 优势

Farm 在性能和功能上相较于 WebpackVite 有显著优势,以下是其主要优势:

极致性能

Farm 使用 Rust 开发,启动 ReactVue 项目只需毫秒,HMR 更新通常在 10ms 内完成,远超 Webpack10 秒以上和 Vite 在大型项目中的表现。

开发与生产一致性

Vite 在开发(使用 esbuild)和生产(使用 Rollup)环境不同的做法相比,Farm 确保两者的完全一致,减少调试难度。

部分打包

Farm 将项目打包为 20-30 个小资源,优化加载速度,同时保持缓存粒度,解决 Vite 在大型项目中模块请求过多的问题。

插件化架构

Farm 完全由插件驱动,支持 RustJS 插件,并兼容 Vite/Rollup 插件,扩展性极强。

使用 Farm

Farm 的入门门槛较低,开发者可以通过简单的命令快速上手

创建项目:

bash 复制代码
npm create farm@latest

或者指定项目名称和模板,例如创建一个 React 项目:

bash 复制代码
pnpm create farm my-react-app --template react

创建完成后,进入项目目录,安装依赖并启动开发服务器:

bash 复制代码
cd farm-app
npm install
npm start

开发服务器默认在 http://localhost:9000 启动,支持快速 HMR 更新。

对于生产环境,您可以运行以下命令进行构建:

bash 复制代码
npm run build

这将生成 ES2017 格式的优化包,包含压缩和 Tree Shaking 功能。要预览构建结果,可以使用:

bash 复制代码
npm run preview

Farm 的配置通过项目根目录下的 farm.config.ts/js/mjs 文件完成。以下是一个简单的配置示例:(默认情况下,可以是零配置的)

javascript 复制代码
import { defineConfig } from '@farmfe/core';

export default defineConfig({
  compilation: {
    input: {
      main: './index.html',
    },
    output: {
      path: './build',
      publicPath: '/',
    },
  },
  server: {
    port: 9000,
  },
});

更多配置选项可参考:www.farmfe.org/docs/config...

在 Farm 中使用插件

我们可以在 farm.config.ts 中配置编译插件,或通过 vitePlugins 使用 Vite/Rollup/Unplugin 插件。以下是一个配置示例:

javascript 复制代码
import { defineConfig } from '@farmfe/core';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  compilation: {
    plugins: ['@farmfe/plugin-react'],
    vitePlugins: [vue()],
  },
});

Farm 支持多种插件类型,包括:Farm 编译插件Vite/Rollup/Unplugin 插件运行时插件Swc 插件

我们还可以使用 RustJS 编写创建自定义插件:

javascript 复制代码
export default {
  name: 'my-plugin',
  priority: 100,
  load: {
    filters: {
      resolvedPaths: ['\\.png$'],
    },
    async executor(params) {
      // 处理 PNG 文件
      return {
        content: '/* PNG 处理结果 */',
        moduleType: 'asset',
      };
    },
  },
};

更多插件开发指南可参考:www.farmfe.org/docs/plugin...

最后

总的来说,Farm 是一个基于 Rust 的超快速 Web 构建工具,提供了增量构建、部分打包、插件化扩展等功能,旨在解决传统构建工具在性能和一致性上的问题!

今天的分享就这些了,感谢大家的阅读!如果文章中存在错误的地方,欢迎指正!

往期精彩推荐

相关推荐
BUTCHER53 分钟前
前端从服务端下载文件的几种方式
前端
LYFlied3 分钟前
Vue的computed与watch底层实现原理
前端·javascript·vue.js
白露与泡影3 分钟前
SpringBoot + Vue 实现 Python 在线调试器 - 技术方案文档
vue.js·spring boot·python
学嵌入式的小杨同学5 分钟前
【嵌入式 C 语言实战】手动实现字符串四大核心函数(strcpy/strcat/strlen/strcmp)
c语言·开发语言·前端·javascript·数据结构·数据库·算法
牛马1116 分钟前
Vue 环境搭建
前端·javascript·vue.js
小二·7 分钟前
Python Web 开发进阶实战:零信任架构落地 —— BeyondCorp 模型在 Flask + Vue 中的实现
前端·python·架构
摘星编程11 分钟前
React Native for OpenHarmony 实战:NetworkInfo 网络信息详解
javascript·react native·react.js
@菜菜_达12 分钟前
HTML 进阶
前端·javascript·html
FreeBuf_31 分钟前
恶意Chrome扩展窃取钱包登录凭证并实施自动化交易
前端·chrome·自动化
Mr_sun.31 分钟前
Day02——基础数据开发-服务管理前端
前端·状态模式