איחוד CSS ו-JS ב-1C-Bitrix: האצת טעינה

אריזה (Bundling) של CSS ו-JS ב-1C-Bitrix: האצת הטעינה

לעיתים קרובות אנו מקבלים לניהול פרויקטים שהתפתחו במשך שנים ומגלים כאוס בניהול ה-CSS וה-JS. תרחיש אופייני: 60–120 בקשות עבור עיצובים וסקריפטים בעמוד קטלוג. אפילו עם HTTP/2, כל בקשה נוספת צורכת זמן עבור DNS, TCP ו-TLS. ברשתות סלולריות זה הורג את הביצועים. הניסיון שלנו מראה ששילוב קבצים יכול להפחית את מספר הבקשות פי 10–20 ולהאיץ את הטעינה ב-40–70%.

מדוע אריזה של CSS ו-JS מאיצה את האתר?

דפדפנים מגבילים את מספר החיבורים במקביל לדומיין אחד (בדרך כלל 6). כאשר יש קבצים רבים, הם נטענים באופן סדרתי. אריזה לקובץ אחד מפחיתה את מספר הבקשות, מה שמורגש במיוחד ברשתות סלולריות. זה גם מפחית את התקורה של DNS, TCP ו-TLS לכל בקשה. לפרטים נוספים, ראו HTTP/2.

מנגנון האריזה המובנה של Bitrix

Bitrix מציע שתי גישות: שימוש ב-API לניהול נכסים (assets) וברכיב bitrix:main.include. כאשר מזעור (minification) מופעל (הגדרות → ביצועים → דחיסה), כל קבצי ה-CSS הרשומים נאספים אל /bitrix/cache/css/<hash>.css וה-JS אל /bitrix/cache/js/<hash>.js. עם זאת, רק קבצים שנרשמו לפני ShowHead() נארזים. תגי <link> ישירים בתבניות מתעלמים מהם.

אילו בעיות אנו פותרים?

סדר ההכללה. בעת אריזה, הקסקדה (cascade) של ה-CSS לעיתים קרובות נשברת. לדוגמה, עיצובי איפוס (reset) חייבים לבוא ראשונים, עיצובי רכיבים אחר כך.

הפתרון הוא להשתמש ב-\Bitrix\Main\Page\Asset::addCss() עם מפרט תלויות מפורש או לפצל לשתי חבילות: בסיסית (grid, טיפוגרפיה) ודינמית (ווידג'טים).

עיצובים וסקריפטים מוטבעים (inline). רכיבים רבים (למשל bitrix:news.list) פולטים רינדור ישירות אל ה-HTML. זה לא נארז. עבור פתרונות מותאמים אישית, אנו מחליפים echo '<style>' ב-$this->addExternalCSS() כך שהקובץ נכנס לחבילה המשותפת ונשמר במטמון.

כפילויות והתנגשויות גרסאות. בפרויקט אחד מצאנו 12 קבצי normalize.css זהים ושלוש גרסאות של jQuery (1.9, 2.1, 3.6) בעמוד אחד. ביקורת (audit) באמצעות יירוט של AddCSSLink() ותיעוד (logging) עזרה לאחד ספריות. Tree shaking ו-code splitting הם הצעדים הבאים.

כיצד אנו עושים זאת: Vite ו-Webpack

עבור פרויקטים מודרניים, הכלים המובנים של Bitrix אינם מספיקים. אנו משתמשים ב-Vite או Webpack.

דוגמה למבנה עם Vite:

local/templates/mytemplate/
├── src/
│   ├── css/
│   │   ├── main.scss
│   │   └── components/
│   ├── js/
│   │   ├── app.js
│   │   └── pages/
├── dist/ ← Vite builds here
│   ├── app.[hash].css
│   └── app.[hash].js
├── header.php ← includes dist/
└── vite.config.js

ב-header.php, אנו כוללים את החבילות דרך CMain::AddCSSLink() כך שהן נשמרות במטמון על ידי Bitrix. Vite מספק HMR במהלך הפיתוח ו-tree shaking עבור פרודקשן.

מדוע Vite טוב יותר מהמנגנון המובנה

Vite תומך ב-SCSS, TypeScript ו-code splitting אוטומטי. האריזה המובנית של Bitrix לא. בפועל, אנו משיגים הפחתה בגודל החבילה של 30–50% על ידי הסרת קוד מת. השוואה:

מקרה בוחן: פורטל עם שלוש צוותי פיתוח

אחד הלקוחות שלנו הוא פורטל B2B, 5 שנים בפיתוח, עם שלושה צוותים שהתחלפו. בעמוד הקטלוג: 47 בקשות CSS (890 KB לא דחוס), 68 בקשות JS (1.4 MB). הביקורת שלנו חשפה: 12 כפילויות CSS, 8 ספריות JavaScript במספר גרסאות.

מה עשינו:

• ביצענו ביקורת של כל ההכללות באמצעות יירוט של CMain::AddCSSLink() ו-AddHeadScript() עם תיעוד.
• איחוד ספריות: גרסת jQuery אחת, הסרת כפילויות.
• העברנו את כל תגי ה-<link> הישירים אל ה-API של Bitrix.
• הגדרנו Vite עבור קוד חדש, וארזנו קוד מדור קודם לחבילה אחת.
• Code splitting: חבילה קריטית + 4 חבילות ספציפיות לעמוד.

תוצאה:

• 47 בקשות CSS → 3.
• 68 בקשות JS → 5.
• משקל ה-CSS+JS הכולל (לאחר gzip) ירד מ-850 KB ל-210 KB עקב הסרת כפילויות ו-tree shaking.
• מהירות טעינת העמוד השתפרה מ-4.2 ש' ל-1.1 ש' (Lighthouse).

תהליך העבודה:

1. אנליטיקה — איסוף תיעוד של כל ההכללות, זיהוי כפילויות, התנגשויות, קוד מת.
2. תכנון — הגדרת ארכיטקטורת החבילות: קריטית, ספציפית לעמוד, נדחית (deferred).
3. מימוש — העברת ההכללות ל-API, הגדרת בילדר (Vite/Webpack), כתיבת קונפיגורציות.
4. בדיקות — אימות כל עמוד לתצוגה תקינה ותפקוד JS.
5. פריסה — העלאה לפרודקשן, בדיקת מטמון.

המטמון המתויג (tagged caching) של Bitrix מבטל את המטמון כאשר הנתונים משתנים. בעת אריזת קבצים, חשוב שביטול המטמון של CSS/JS יעבוד כראוי. אנו מגדירים זאת דרך $arParams["CACHE_TAGS"].

מה כלול בעבודה:

• ביקורת מלאה של ההכללות הנוכחיות עם דוח.
• איחוד ספריות והסרת כפילויות.
• הגדרת הבילדר (Vite או Webpack) עבור התבנית שלכם.
• אינטגרציה עם המטמון המתויג של Bitrix.
• תיעוד של תהליך הבנייה וההכללה.
• הדרכת הצוות על הארכיטקטורה החדשה.
• שבוע תמיכה לאחר השחרור.

לוחות זמנים

העלות נקבעת באופן אישי לאחר הביקורת. צרו קשר לייעוץ — נציע את הפתרון האופטימלי. אנו מבטיחים שיפור של לפחות פי 2 במהירות הטעינה, מאושר בבדיקות.

בדיקות עומס לאחר אריזה הן חובה — במקרים נדירים, סדר הטעינה של הסקריפטים משנה, ושבירתו עלולה לגרום לשגיאות JS בעמודים ספציפיים. הניסיון שלנו מאפשר לנו לחזות ניואנסים כאלה ולהימנע מהם בשלב התכנון. קבלו ייעוץ ותוכנית אופטימיזציה.