您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

Farm 火了!比 Rspack/Vite 更快的打包方案!

时间:2023-04-04 14:00:51  来源:今日头条  作者:高级前端进阶

今天给大家带来的主题是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 快得多。

2.Farm 的出现

鉴于 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.使用 Farm

Farm 需要 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



Tags:Farm   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
今天给大家带来的主题是Farm,即一个快速、强大、本地与生产环境保持一致的 Web 打包器,目标是解决 Vite 面临的主要问题。话不多说,直接开始!1.Vite 的不足随着 web 项目规模的...【详细内容】
2023-04-04  Tags: Farm  点击:(0)  评论:(0)  加入收藏
▌简易百科推荐
今天给大家带来的主题是Farm,即一个快速、强大、本地与生产环境保持一致的 Web 打包器,目标是解决 Vite 面临的主要问题。话不多说,直接开始!1.Vite 的不足随着 web 项目规模的...【详细内容】
2023-04-04  高级前端进阶  今日头条  Tags:Farm   点击:(0)  评论:(0)  加入收藏
大家好,我卡颂。最近AIGC​(AI Generated Content,利用AI​生成内容)非常热,技术圈也受到了很大冲击。目前来看,利用LLM​(Large Language Model,大语言模型)辅助开发还停留在非常早...【详细内容】
2023-03-31  卡颂  微信公众号  Tags:前端   点击:(15)  评论:(0)  加入收藏
当你在转转咨询客服时,你的问题是如何发送到客服的?客服又是如何快速精准回答的呢?这篇文章将从前端的视角,带你了解转转客服通信的整体流程。客服通信的整体架构​首先看一看用...【详细内容】
2023-03-31  大转转FE  微信公众号  Tags:前端   点击:(8)  评论:(0)  加入收藏
最近一款名为Cursor的代码编辑器已经传遍了圈内,受到众多编程爱好者的追捧。它主打的亮点就是,通过 GPT-4 来辅助你编程,完成 AI 智能生成代码、修改 Bug、生成测试等操作。确...【详细内容】
2023-03-30  萝卜大杂烩  微信公众号  Tags:编辑器   点击:(8)  评论:(0)  加入收藏
Vue 提供了一种简单优雅的处理动画的方法。你可以通过添加一个指令轻松应用它们,该指令为你完成所有繁重的工作。或者,你可以利用 JavaScript 钩子将更复杂的逻辑纳入你的动...【详细内容】
2023-03-30  大迁世界  微信公众号  Tags:Vue   点击:(16)  评论:(0)  加入收藏
1、工具库(1)LodashLodash是一个一致性、模块化、高性能、提高开发者效率的JavaScript 实用工具库。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 J...【详细内容】
2023-03-30  前端充电宝  微信公众号  Tags:前端   点击:(9)  评论:(0)  加入收藏
想要在 2023 年构建出色的 Vue.js 应用程序吗?如果你的回答是 YES,那么一定要试一试这篇文章整理的 7 个 Vue 3 插件和库。无需编写大量代码,这些令人难以置信的插件和库就可以...【详细内容】
2023-03-29  前端新世  微信公众号  Tags:Vue   点击:(12)  评论:(0)  加入收藏
作为国内知名的互联网公司,腾讯在前端领域做出了很多开源贡献。本文就来盘点腾讯最热门的 10 款前端开源项目!wujie无界微前端是一款基于 Web Components + iframe 微前端框...【详细内容】
2023-03-29  前端充电宝  微信公众号  Tags:前端   点击:(8)  评论:(0)  加入收藏
我们的新项目是基于vite + vue3的,使用的编程语言是JavaScript。我们的团队除了我,对typescript都不熟悉,他们觉得学习typescript有点困难。众所周知,JS的弱类型机制,使编辑器很...【详细内容】
2023-03-29  前端梁哥  今日头条  Tags:Vue   点击:(15)  评论:(0)  加入收藏
作者:京东零售 陈艳春前言:组件设计是通过对功能及视觉表达中元素的拆解、归纳、重组,并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整理...【详细内容】
2023-03-26  京东云开发者    Tags:Vue   点击:(10)  评论:(0)  加入收藏
相关文章
    无相关信息
站内最新
站内热门
站内头条