انتقال CRA به Rspack: ساخت‌های 5-10 برابر با واکنش سریع‌تر

CRA چیست؟

CRA ابزاری فوق العاده برای شروع توسعه React است. آسان برای استفاده و به خوبی مستند شده و یک پایه محکم برای پروژه فراهم می کند. در زیر هود از webpack، Babel، ESLint، ابزارهای اضافی و کتابخانه ها استفاده می کند. توسعه‌دهندگان می‌توانند به جای پیکربندی همه این تنظیمات توسط خود، بر پیاده‌سازی منطق تجاری تمرکز کنند.

نیاز به باندلرهای مبتنی بر Rust:

عملکرد بسته‌بندی و HRM مستقیماً با اندازه پایگاه کد متناسب است، برای برنامه‌های مبتنی بر کد بزرگ، بسته‌بندی بسته‌بندی وب زمان زیادی می‌برد.
با افزایش پیچیدگی برنامه شما ممکن است متوجه گلوگاه های عملکردی در فرآیند ساخت شوید.
Rspack یک باندلر نسل بعدی است که برای ساخت های رعد و برق 5 تا 10 برابر سریعتر طراحی شده است. بر اساس زبان برنامه نویسی Rust با کارایی بالا ساخته شده است

مراحل مهاجرت:

Create React App (CRA) خود دارای بسیاری از قابلیت‌های داخلی است، بنابراین به صورت دستی یک پیکربندی معادل را با استفاده از @rspack/cli می تواند چالش برانگیز باشد.
برای مهاجرت، از rsbuild استفاده خواهیم کرد که یک ابزار ساخت مبتنی بر Rspack برای وب است. هدف اصلی Rsbuild ارائه قابلیت های ساخت خارج از جعبه برای کاربران Rspack است که به توسعه دهندگان این امکان را می دهد تا یک پروژه وب را با پیکربندی صفر شروع کنند.

ما یک برنامه demo react ایجاد شده توسط CRA راه اندازی کرده ایم، اجازه دهید آن را به rspack منتقل کنید

مرحله 1:
وابستگی های CRA را حذف کنید

npm remove react-scripts

گام 2: وابستگی های Rsbuild را نصب کنید

npm add @rsbuild/core @rsbuild/plugin-react -D

مرحله 3: به روز رسانی اسکریپت های npm در package.json

{
  "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "eject": "react-scripts eject"
  }
}

با دستورات CLI Rsbuild جایگزین کنید

{
  "scripts": {
    "start": "rsbuild dev",
    "build": "rsbuild build",
    "preview": "rsbuild preview"
  }
}

مرحله 4: ایجاد فایل پیکربندی

یک فایل پیکربندی Rsbuild ایجاد کنید rsbuild.config.ts در همان دایرکتوری package.json و مطالب زیر را اضافه کنید:

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
});

مرحله 5: انتقال اولیه انجام شده است، می توانید یک برنامه را با اجرا راه اندازی کنید npm run start و برای ساخت اجرا npm run build

در زیر عملکرد ساخت آمده است، زمان ساخت از حدود 11 ثانیه به 2 ثانیه کاهش می یابد.

در اینجا پیوند مخزن git برای CRA به Rspack Migration است.

برای پیکربندی دقیق تر و پیشرفته تر Rsbuild را بررسی کنید