利用 Rust web 框架 Farm 快速迁移 Vue3 后台管理系统

发表时间: 2024-05-28 12:06

Farm 介绍

可能很多同学还不知道 Farm , 先给大家介绍一下, Farm 是一个基于 Rust 的 Web 构建工具, 类似 webpack 和 vite，但更快。 Farm 用 resolve, load, transform 把所有的 asset (js/jsx/ts/tsx、css/sass/less、html、静态资源、json 等)，并将它们打包成一系列可部署文件。 Farm 作为一个速度极快的构建工具，可帮助您更快的构建出 web / nodejs 应用程序。

Farm 特性以及设计理念

⚡ 超级快: 使用 Rust 编写, 可以在毫秒级别内启动一个 React 或 Vue 项目。在大多数情况下, 可以在 10ms 内执行 HMR 的更新, 理论上任何项目热启动在开启增量编译的情况下启动时间不会超过 1 秒。
⚡ 增量构建: 支持持久缓存，以模块粒度进行缓存复用，任何一个模块如果没有改变，始终只会编译一次！
完全可拔插: Farm 由插件驱动, 兼容 Vite, Rollup, Unplugin 插件，同时支持 Farm 编译插件（Rust 和 JavaScript 插件，以及 Swc 插件），Farm Runtime 插件，Farm Dev Server 插件。
⚙️ 丰富的编译能力支持: 开箱即用, Farm 内置了 JS/TS/JSX/TSX、CSS、Css Modules、Sass、Less、Postcss，HTML 和静态资源的编译，支持 React，Vue，Solid, Svelte, Preact 等框架。
⏱️ 懒编译: 仅仅在请求时才编译动态导入的资源，极大提速大型项目的编译。通过 dynamic import 即可启用，被 dynamic import 的模块及其依赖仅在使用时才会编译。
局部打包: 自动根据依赖关系、资源大小，将项目打包成若干个资源，提升资源加载性能的同时，保证缓存命中率。参考 RFC-003 Partial Bundling
一致性: 开发环境和生产环境的表现一致，所见即所得。
兼容性: 同时支持传统(ES5)和现代浏览器。

从 vite 项目中如何迁移

接下来就进入正题, 那么如何从已有的 vite 项目迁移到 Farm 呢？

从 vite 迁移到 farm 其实非常简单, 因为 farm 内置了对 vite 插件的兼容, 所以您只需要做的是将 vite.config.ts 转换成 farm.config.js。

参考 Configuring Farm 将 Farm 的配置选项映射到 vite 配置
对于 Vite Plugins，将 vite.config.ts 中的plugins移动到 farm.config.ts 中的 vitePlugins

但是需要注意的是

对于某些 vite 插件例如: unocss 这种与 vite 深度集成的插件, 由于内部设计的差异问题, 会导致某些插件与 Farm 并不兼容,
一些 Vite 配置选项在 Farm 中是不需要的，例如 optimizeDeps，您可以在迁移到 Farm 时忽略这些选项
对于 SSR，您需要将其重构为Farm SSR

迁移基础项目

我们先从基础项目来体会一下从 vite 迁移到 Farm 有多简单

首先还是我们熟悉的创建 vite 项目

pnpm create vite

我们选一个 Vue 项目模版, 创建好项目之后, 我们的 vite.config.ts 应该是这样的

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({  plugins: [vue()],})

那么把大象放进冰箱一共需要三步

第一步: 安装依赖

pnpm install @farmfe/core @farmfe/cli -D

第二步: 新增 farm.config.ts 文件，Farm 在插件系统和 hmr 做了一套适配器来兼容 vite 生态, 所以这里我们就可以直接使用 vite 插件啦

import { defineConfig } from '@farmfe/core'import vue from '@vitejs/plugin-vue'export default defineConfig({  vitePlugins: [vue()],})

第三步: 啊没有第三步了, 因为我们已经迁移完成啦。

然后我们在控制台执行 npx farm start 控制台就可以看到以下命令

执行构建命令 npx farm build

这样就大功告成啦, 是不是非常简单。

迁移 vue-pure-admin

接下来我们来迁移一个比较复杂的项目, vue-pure-admin 是一个全面ESM+Vue3+Vite+Element-Plus+TypeScript 编写的一款后台管理系统, 并且模块数量算是比较大, 那么我们使用 Farm 来迁移这个项目, 来进一步体现出 Farm 的优势. 以及迁移的成本到底有多低

首先我们先克隆一下 pure-admin 的仓库代码, 然后查看一下项目的 vite 配置文件, 并提示出迁移所需要修改的地方

import { getPluginsList } from "./build/plugins";import { include, exclude } from "./build/optimize";import { type UserConfigExport, type ConfigEnv, loadEnv } from "vite";import {  root,  alias,  warpperEnv,  pathResolve,  __APP_INFO__} from "./build/utils";export default ({ mode }: ConfigEnv): UserConfigExport => {  const { VITE_CDN, VITE_PORT, VITE_COMPRESSION, VITE_PUBLIC_PATH } =    warpperEnv(loadEnv(mode, root));  return {    base: VITE_PUBLIC_PATH,    root,    resolve: {      alias    },    // 服务端渲染    server: {      // 端口号      port: VITE_PORT,      host: "0.0.0.0",      // 预热文件以提前转换和缓存结果，降低启动期间的初始页面加载时长并防止转换瀑布      warmup: {        clientFiles: ["./index.html", "./src/{views,components}/*"]      }    },    plugins: getPluginsList(VITE_CDN, VITE_COMPRESSION),    // https://cn.vitejs.dev/config/dep-optimization-options.html#dep-optimization-options    optimizeDeps: {      include,      exclude    },    build: {      // https://cn.vitejs.dev/guide/build.html#browser-compatibility      target: "es2015",      sourcemap: false,      // 消除打包大小超过500kb警告      chunkSizeWarningLimit: 4000,      rollupOptions: {        input: {          index: pathResolve("./index.html", import.meta.url)        },        // 静态资源分类打包        output: {          chunkFileNames: "static/js/[name]-[hash].js",          entryFileNames: "static/js/[name]-[hash].js",          assetFileNames: "static/[ext]/[name]-[hash].[ext]"        }      }    },    define: {      __INTLIFY_PROD_DEVTOOLS__: false,      __APP_INFO__: JSON.stringify(__APP_INFO__)    }  };};

farm 配置基本平替 vite 配置, 我们再来看一下迁移到 farm 所需要修改的配置文件，由于对 css 的处理 farm 和 vite 的处理方向上的差异，所以我们只需要把一些 css 的插件配置替换成 farm 的插件, 其他的 vite 插件完全可以复用

import { getPluginsList } from "./build/plugins";import { type UserConfigExport, type ConfigEnv, loadEnv } from "@farmfe/core";import { root, alias, warpperEnv, __APP_INFO__ } from "./build/utils";import postcss from "@farmfe/js-plugin-postcss";import sass from "@farmfe/js-plugin-sass";export default ({ mode }: ConfigEnv): UserConfigExport => {  const { VITE_CDN, VITE_PORT, VITE_COMPRESSION, VITE_PUBLIC_PATH } =    warpperEnv(loadEnv(mode, root)[0]);  return {    compilation: {      output: {        publicPath: VITE_PUBLIC_PATH,        targetEnv: "browser-es2015",        filename: "static/[ext]/[name]-[hash].[ext]",        assetsFilename: "static/[ext]/[name]-[hash].[ext]"      },      resolve: {        alias      },      script: {        plugins: [          {            name: "@swc/plugin-remove-console",            options: {              exclude: ["error"]            },            filters: {              moduleTypes: ["js", "ts", "jsx", "tsx"]            }          }        ]      },      externalNodeBuiltins: false,      define: {        __INTLIFY_PROD_DEVTOOLS__: false,        __APP_INFO__: process.env.FARM_FE          ? __APP_INFO__          : JSON.stringify(__APP_INFO__)      }    },    root,    // 服务端渲染    server: {      // open: true,      port: VITE_PORT    },    plugins: [      sass({        legacy: true      }),      postcss(),      {        name: "remove-css-filter-plugin",        priority: 0,        transform: {          filters: {            resolvedPaths: ["element-plus/dist/index.css"]          },          async executor({ content }) {            return {              content: content.replace(/filter:\s*alpha\(opacity=0\);/g, "")            };          }        }      }    ],    vitePlugins: getPluginsList(VITE_CDN, VITE_COMPRESSION)  };};

我们可以看到 vite 插件完全复用, 需要修改的地方仅仅是一些编译输出的属性, 整体最大的修改点只有这些,我在 vue-pure-admin 项目提了一个 pr, 还有一些设计差异的小细节大家可以在这里查看尽管从 Vite 迁移到 Farm 需要进行一些调整和适配，但是这个过程并不复杂，而且可以通过优化提升项目的性能和开发效率。因为确实迁移很简单, 所以本篇文章只是简单的介绍一下 Farm 目前的可用度，随着 Farm 的不断发展和完善，相信它会成为更多项目的首选构建工具。

那么到了大家最关心的一点, 那么迁移之后的性能到底怎么样呢？

在开启增量构建的情况下的项目启动对比

注：因为 vite 对于源代码是请求时编译，所以此处加上了 “项目可访问时间”（即 “热启动时间” + “页面加载时间”），作为另一个指标来综合对比性能。所以 Farm 在热启动比 vite 快 5 倍左右

结语

farm 已经具有了所有开发调试发布也有很大的提升空间

Farm 开源已经一年多了, 也已经正式的发布了 1.0 版本, 已经达到了生产可用的状态, 不仅仅是从 vite 中迁移, 在 webpack 中迁移, 团队中也做了非常多的尝试, 迁移成本都很低, Farm 下一步计划基于 Farm 打造出下一代 SSR 框架, 也希望可以有更多的同学参与进来, 共同学习进步。

未来，我们将继续撰写更多的文章，深入介绍 Farm 的各项功能以及特性和原理解析，帮助大家更好地理解和使用下一代的构建工具，可以对前端工程化以及代码解析与编译的原理理解之后, 可以更加深入地了解现代前端开发的核心概念和技术，并掌握构建高效、稳定的前端项目的关键技能。让我们共同期待未来的探索和发现，共同探讨前端技术的前沿话题，为构建更加美好的 Web 世界贡献一份力量。

链接：https://juejin.cn/post/7352837711339814963