🚀🚀🚀 不要只知道 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 构建工具,提供了增量构建、部分打包、插件化扩展等功能,旨在解决传统构建工具在性能和一致性上的问题!

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

往期精彩推荐

相关推荐
roamingcode20 分钟前
前端 AI Agent 多智能体协作架构:从对抗式排查到工作流解耦
前端·人工智能·架构·agent·team
蓝莓味的口香糖1 小时前
【vue】初始化 Vue 项目
前端·javascript·vue.js
光影少年2 小时前
数组去重方法
开发语言·前端·javascript
我命由我123452 小时前
浏览器的 JS 模块化支持观察记录
开发语言·前端·javascript·css·html·ecmascript·html5
weixin_443478512 小时前
Flutter第三方常用组件包之路由管理
前端·javascript·flutter
武藤一雄2 小时前
C# 异步回调与等待机制
前端·microsoft·设计模式·微软·c#·.netcore
啥都不懂的小小白3 小时前
前端CSS入门详解
前端·css
林恒smileZAZ3 小时前
前端大屏适配方案:rem、vw/vh、scale 到底选哪个?
开发语言·前端·css·css3
QQ5110082853 小时前
基于区块链的个人医疗咨询挂号信息系统vue
前端·vue.js·区块链
程序员小寒5 小时前
JavaScript设计模式(八):命令模式实现与应用
前端·javascript·设计模式·ecmascript·命令模式