הגדרת SWC לתרגום JavaScript ו-TypeScript

הפרויקט שלך משתמש ב-TypeScript וב-webpack, אבל הבנייה אורכת דקות? Babel עובד, אבל ככל שבסיס הקוד גדל, זמן יקר אובד. מפתחים מבזבזים עד 30% מזמנם בהמתנה לקומפילציה מחדש — אנחנו מבטלים את העיכוב הזה. ראינו פרויקטים שבהם זמן ההתחלה הקרה עלה על 30 שניות, מה שפגע בפרודוקטיביות של הצוות. כל שנייה של המתנה היא אובדן ריכוז. הפתרון הוא SWC (Speedy Web Compiler), מהדר מבוסס Rust שפועל פי 20–70 מהר יותר מ-Babel. היישום אורך 2 עד 8 שעות, וההאצה משתלמת בכל בנייה מחדש. אנחנו עוזרים להגדיר את SWC עבור המחסנית שלך: מהחלפת babel-loader ועד אינטגרציה עם Jest ו-Next.js. קבלו ייעוץ למיגרציה — נבחן את הפרויקט שלך ונציע תוכנית סוהר.

למה SWC מהיר יותר מ-Babel

Babel כתוב ב-JavaScript; כל מעבר מנתח ומחדש את ה-AST מאפס. SWC משתמש ב-Rust וב-AST יחיד, מה שמעניק האצת מהירות רדיקלית. כפי שצוין בתיעוד של SWC, הוא אינו תחליף למהדר TypeScript — בדיקת הטיפוסים נשארת עם tsc --noEmit. אבל הטרנספילציה והמיניפיקציה הופכות לכמעט מיידיות.

אילו פרויקטים מרוויחים מ-SWC?

SWC יעיל במיוחד ב:

• מונוריפו עם עשרות חבילות (כל שנייה של זמן בנייה מוכפלת במספר החבילות)
• צינורות CI שבהם זמן הבנייה קריטי לפריסות
• פרויקטים עם מיקרופרונטאנדים ובנייה מחדש תכופה

איך אנחנו עושים את זה: מקרה אמיתי

בפרויקט מונוריפו עדכני עם 20 חבילות פנימיות, זמן ההתחלה הקרה עם Babel היה 45 שניות. לאחר המיגרציה ל-SWC, הוא ירד ל-4 שניות — שיפור של פי 11. מחזור הפיתוח של הצוות התקצר משמעותית, וזמן בניית ה-CI עבור כל הצינור ירד מ-8 דקות לפחות מ-2 דקות. השתמשנו באותם שלבי הגדרה המתוארים להלן.

איך להגדיר SWC בפרויקט שלך

שלב 1. יצירת קובץ הגדרות

התקן את @swc/core ואת @swc/cli:

npm install --save-dev @swc/core @swc/cli @swc/helpers core-js@3 

צור את npm install --save-dev @swc/core @swc/cli @swc/helpers core-js@3 :

{
  "$schema": "https://swc.rs/schema.json",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    },
    "target": "es2020",
    "externalHelpers": true
  },
  "env": {
    "targets": "> 0.5%, last 2 versions, not dead",
    "mode": "usage",
    "coreJs": "3"
  }
}

שלב 2. אינטגרציה עם webpack

החלף את babel-loader ב-swc-loader בקובץ webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(t|j)sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'swc-loader',
        },
      },
    ],
  },
};

שלב 3. אינטגרציה עם Jest

התקן את @swc/jest והגדר transform בקובץ jest.config:

export default {
  transform: {
    '^.+\\.(t|j)sx?$': [
      '@swc/jest',
      {
        jsc: {
          parser: {
            syntax: 'typescript',
            tsx: true,
            decorators: true,
          },
          transform: {
            react: {
              runtime: 'automatic',
            },
          },
        },
        env: {
          targets: {
            node: 18,
          },
        },
      },
    ],
  },
};

שלב 4. תוספים מותאמים אישית

תוספי SWC מתקמפלים ל-WebAssembly. עבור styled-components: התקן את החבילה והוסף ל-.swcrc:

{
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@swc-contrib/plugin-styled-components",
          {
            "displayName": true,
            "ssr": true
          }
        ]
      ]
    }
  }
}

אינטגרציה עם Next.js (אופציונלי)

מאז Next.js 13, SWC הוא המהדר ברירת המחדל. אם אתה משתמש בהגדרות Babel מותאמות אישית, ייתכן שיידרש התאמה ידנית. אנחנו יכולים להעביר את ההגדרות שלך ולוודא תאימות.

מה כולל שירות הגדרת SWC

• ביקורת על הגדרות הבנייה הנוכחיות שלך (Babel, webpack, Jest)
• פיתוח של .swcrc המותאם לתוספים ולצרכי הטרנספילציה שלך
• החלפת babel-loader ב-swc-loader, הגדרת Jest ו-Next.js
• בדיקת כל התרחישים (npm run build, npm test, שרת פיתוח)
• תיעוד השינויים והמלצות
• אחריות ל-30 יום — כל תקלה מתוקנת ללא עלות

הניסיון והאחריות שלנו

מעל 5 שנים בפיתוח web, יותר מ-10 פרויקטים שהועברו ל-SWC. אנחנו מבטיחים לפחות פי 3 האצת בנייה בעת החלפת Babel. כל הגדרה מלווה בבדיקות ותיעוד. למהנדסים שלנו יש ניסיון עם Rust ומהדרים.

מלכודות מיגרציה נפוצות

• חוסר בדיקת טיפוסים: SWC אינו בודק טיפוסים — הוסף תמיד את { "$schema": "https://swc.rs/schema.json", "jsc": { "parser": { "syntax": "typescript", "tsx": true, "decorators": true, "dynamicImport": true }, "transform": { "react": { "runtime": "automatic" } }, "target": "es2020", "externalHelpers": true }, "env": { "targets": "> 0.5%, last 2 versions, not dead", "mode": "usage", "coreJs": "3" } } ל-CI.
• יעד שגוי: הגדרת יעד נמוך מדי גורמת לשגיאות תאימות. השתמש ב-module.exports = { module: { rules: [ { test: /\.(t|j)sx?$/, exclude: /node_modules/, use: { loader: 'swc-loader' }, }, ], }, }; .
• התעלמות מ-externalHelpers: ללא @swc/helpers, ה-helpers מוטמעים בכל מודול, מה שמגדיל את גודל החבילה.
• תוספים שנשכחו: styled-components, emotion, Linaria דורשים תוספי wasm.
• מפות מקור שגויות: SWC מייצר מפות מקור כברירת מחדל, אבל יש להפעיל אותן במפורש ב-webpack.

הערכת זמן

• החלפת Babel ב-SWC בפרויקט webpack: 2–4 שעות
• הגדרת Jest עם @swc/jest: 1–2 שעות
• מיגרציה מלאה עם דקורטורים ותוספים מותאמים אישית: 4–8 שעות

איך להתחיל

צור איתנו קשר — ננתח את הפרויקט שלך ונציע אסטרטגיית מיגרציה אופטימלית ל-SWC. נעריך את הזמן והעלות באופן אישי.