הגירה ל-Rspack: האץ בניות עד פי 10 ללא שכתוב קונפיגורציה

אנו נתקלים לעתים קרובות בפרויקטים שבהם בניות Webpack אורכות דקות במקום שניות. מפתחים ממתינים, ולקוחות מבזבזים כסף. Rspack—מאגד (bundler) מבית ByteDance (TikTok) הכתוב ב-Rust עם API תואם Webpack—פותר זאת. בהתבסס על הנתונים שלנו, מעבר של פרויקט React טיפוסי עם למעלה מ-2000 רכיבים מ-Webpack ל-Rspack מקצר בניות פיתוח מ-45 ל-8 שניות ובניות ייצור מ-120 ל-15 שניות. זה מפחית ישירות את עלויות הפיתוח: פחות זמן בנייה, יותר זמן לתכונות. הרעיון המרכזי: קחו את קובץ ה-Webpack הקיים שלכם, החליפו את require('webpack') ב-require('@rspack/core'), וקבלו בניות מהירות פי 5–10 ללא כתיבה מחדש של תצורות. בפועל, התאימות אינה 100%, אך עבור רוב הפרויקטים זהו נתיב ישים. הזמינו מאיתנו התקנת Rspack סוהר—אנו מבטיחים תאימות ותוצאות מהירות.

למה Rspack במקום Vite?

Vite היא בחירה מצוינת לפרויקטים חדשים. Rspack נדרש כאשר:

• כבר יש לכם תצורת Webpack גדולה שיהיה קשה לכתוב מחדש עבור Vite
• אתם משתמשים בתוספים ספציפיים של Webpack שאין להם מקבילים ב-Vite
• אתם זקוקים לתמיכה ב-Module Federation (Rspack תומך ב-MF v1 ו-v2)
• הפרויקט שלכם כבר משתמש ב-Rsbuild או Rsdoctor מהמערכת האקולוגית של ByteDance

Vite משתמשת במערכת המודולים המקורית של הדפדפן במצב פיתוח אך מאגדת עם Rollup לייצור. Rspack משתמש במנוע Rust יחיד גם לפיתוח וגם לבנייה, מה שמפשט את התצורה ומאיץ בניות ייצור. אם אתם כבר משתמשים ב-Rsbuild, ההגירה ל-Rspack מהירה אף יותר—רק החליפו את המתאם.

איך להגר מ-Webpack ל-Rspack

הגירה טיפוסית אורכת 4–8 שעות. ראשית, התקינו את החבילות: npm install --save-dev @rspack/core @rspack/cli. לאחר מכן החליפו סקריפטים ב-package.json: "dev": "rspack dev" ו-"build": "rspack build". בשלב הבא, שנו את השם של webpack.config.js ל-rspack.config.js והחליפו את הייבוא: const { rspack } = require('@rspack/core') במקום const webpack = require('webpack'). לבסוף, התאימו את התוספים המובנים: webpack.DefinePlugin → rspack.DefinePlugin, HtmlWebpackPlugin → rspack.HtmlRspackPlugin, MiniCssExtractPlugin → rspack.CssExtractRspackPlugin. אם אתם משתמשים ב-ProgressPlugin או BannerPlugin, המקבילים שלהם זמינים ב-@rspack/core.

איך להגדיר במהירות Rspack לפרויקט React?

rspack.config.ts טיפוסי לפרויקט React עם TypeScript נראה כך:

import { defineConfig } from '@rspack/cli';
import { rspack } from '@rspack/core';
import path from 'path';

export default defineConfig({
  entry: {
    main: './src/index.tsx',
  },
  output: {
    filename: '[name].[contenthash:8].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(tsx?|jsx?)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
              },
              transform: {
                react: {
                  runtime: 'automatic',
                  development: process.env.NODE_ENV === 'development',
                  refresh: process.env.NODE_ENV === 'development',
                },
              },
            },
            env: {
              targets: 'Chrome >= 90',
            },
          },
        },
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [rspack.CssExtractRspackPlugin.loader, 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.(png|jpe?g|svg|gif|webp)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024,
          },
        },
      },
    ],
  },
  plugins: [
    new rspack.HtmlRspackPlugin({
      template: './public/index.html',
      filename: 'index.html',
    }),
    new rspack.CssExtractRspackPlugin({
      filename: '[name].[contenthash:8].css',
    }),
    new rspack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
        },
      },
    },
  },
  devServer: {
    port: 3000,
    historyApiFallback: true,
    hot: true,
  },
});

Module Federation עם Rspack

Rspack תומך ב-Module Federation v2 דרך import { defineConfig } from '@rspack/cli'; import { rspack } from '@rspack/core'; import path from 'path'; export default defineConfig({ entry: { main: './src/index.tsx', }, output: { filename: '[name].[contenthash:8].js', path: path.resolve(__dirname, 'dist'), clean: true, }, resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'], alias: { '@': path.resolve(__dirname, 'src'), }, }, module: { rules: [ { test: /\.(tsx?|jsx?)$/, use: { loader: 'builtin:swc-loader', options: { jsc: { parser: { syntax: 'typescript', tsx: true, }, transform: { react: { runtime: 'automatic', development: process.env.NODE_ENV === 'development', refresh: process.env.NODE_ENV === 'development', }, }, }, env: { targets: 'Chrome >= 90', }, }, }, exclude: /node_modules/, }, { test: /\.css$/, use: [rspack.CssExtractRspackPlugin.loader, 'css-loader', 'postcss-loader'], }, { test: /\.(png|jpe?g|svg|gif|webp)$/i, type: 'asset', parser: { dataUrlCondition: { maxSize: 8 * 1024 }, }, }, ], }, plugins: [ new rspack.HtmlRspackPlugin({ template: './public/index.html', filename: 'index.html', }), new rspack.CssExtractRspackPlugin({ filename: '[name].[contenthash:8].css', }), new rspack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), }), ], optimization: { splitChunks: { chunks: 'all', cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', priority: 10, }, }, }, }, devServer: { port: 3000, historyApiFallback: true, hot: true, }, }); :

import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';

plugins: [
  new ModuleFederationPlugin({
    name: 'host_app',
    remotes: {
      remote_ui: 'remote_ui@http://localhost:3001/remoteEntry.js',
    },
    shared: {
      react: {
        singleton: true,
        requiredVersion: '^18.0.0'
      },
      'react-dom': {
        singleton: true
      },
    },
  }),
]

מה זה Rsbuild?

Rsbuild הוא מעטפת סביב Rspack עם תצורה מוכנה, בדומה ל-Vite. הוא מספק תוספים עבור React, Vue, SASS ועוד. אם אתם מתחילים פרויקט חדש ללא תצורת Webpack מדור קודם, Rsbuild היא הבחירה הטובה ביותר. הגדרת פרויקט React/TypeScript חדש אורכת 1–2 שעות.

תאימות תוספים

רוב תוספי ה-Webpack עובדים עם Rspack, אך ישנם יוצאי דופן. תוספים שנבדקו מפורטים באתר הרשמי של Rspack. בין הבלתי תואמים נכללים תוספים המשתמשים בהוקי קומפילציה ברמה נמוכה של Webpack (@module-federation/enhanced, הוקי tapable מותאמים אישית). ניתן לבדוק תוסף ספציפי עם:

rspack build 2>&1 | grep -i "unsupported\|warning\|deprecated" 

טעויות הגירה טיפוסיות

• אי-התאמה בין target לסביבה: Rspack כברירת מחדל בונה עבור Node.js אם לא צוין עם import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack'; plugins: [ new ModuleFederationPlugin({ name: 'host_app', remotes: { remote_ui: 'remote_ui@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true }, }, }), ] .
• תוספים שעובדים דרך compilation.hooks: לדוגמה, compiler.hooks.thisCompilation עשוי לדרוש התאמה.
• שימוש ב-rspack build 2>&1 | grep -i "unsupported\|warning\|deprecated" : עובד ב-Rspack אך עם מגבלות. עדיף להחליף ב-target: 'web' מ-Rsbuild.

מה כלול בהתקנת Rspack

• הגירה מלאה של התצורה מ-Webpack ל-Rspack
• התאמת תוספים ו-loaders
• הגדרת Module Federation (אם נדרש)
• אופטימיזציה של פיצול chunks וקאש
• תיעוד השינויים
• הדרכת צוות על עקרונות בסיסיים
• חודש תמיכה לאחר ההתקנה

לוחות זמנים ועלות

לוחות הזמנים תלויים במורכבות הפרויקט. מעבר מ-Webpack ל-Rspack ללא Module Federation אורך 4–8 שעות. הגדרת Rsbuild מאפס אורכת 1–2 שעות. שילוב Module Federation בין מספר יישומים אורך 1–2 ימים. העלות מחושבת באופן פרטני. התקנת Rspack מחזירה את עצמה תוך 1–2 חודשים דרך חיסכון בזמן הצוות. צרו קשר להערכת פרויקט ופתרון אופטימלי. הזמינו התקנת Rspack והאיצו את הפיתוח שלכם.

לחברה שלנו ניסיון של למעלה מ-10 שנים בפיתוח אתרים והיא יישמה יותר מ-40 פרויקטים באמצעות מאגדים מודרניים. אנו מבטיחים תאימות למערכת האקולוגית שלכם והאצת בנייה של עד פי 10.