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

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

往期精彩推荐

相关推荐
小小小小宇2 小时前
TS泛型笔记
前端
小小小小宇2 小时前
前端canvas手动实现复杂动画示例
前端
codingandsleeping2 小时前
重读《你不知道的JavaScript》(上)- 作用域和闭包
前端·javascript
小小小小宇3 小时前
前端PerformanceObserver使用
前端
zhangxingchao4 小时前
Flutter中的页面跳转
前端
烛阴4 小时前
Puppeteer入门指南:掌控浏览器,开启自动化新时代
前端·javascript
全宝5 小时前
🖲️一行代码实现鼠标换肤
前端·css·html
小小小小宇5 小时前
前端模拟一个setTimeout
前端
芝士加6 小时前
Playwright vs MidScene:自动化工具“双雄”谁更适合你?
前端·javascript