Vite לעומת Webpack עבור Vue.js ב-1C-Bitrix: מדריך הגדרת בנייה

אתה פותח דף קטלוג, וחבילת ה-Vue.js שוקלת 800 KB — הדפדפן קופא ל-5 שניות. זה קורה כאשר Bitrix ללא הגדרות נוספות לא יכול להתמודד עם פרונטאנד מודרני: קבצי .vue לא מקומפלים, ייבואים לא נפתרים, ו-jQuery מ-CJSCore מתחיל להתנגש עם ה-DOM הווירטואלי. בנייה נכונה פותרת הכל: HMR, tree-shaking, פיצול chunks, טעינה עצלה, וללא התנגשויות.

אנחנו מגדירים בניות Vue.js עבור Bitrix כבר שנים רבות והשלמנו מעל 20 פרויקטים. במאמר זה, נבחן כיצד לבחור בין Vite ל-Webpack, ונספק תצורת production מוכנה. השקעה טיפוסית להגדרה כזו נעה בין $500 ל-$2000 בהתאם למורכבות, עם חיסכון ממוצע של 30% בזמן פיתוח.

למה צריך bundler ייעודי עבור Vue.js ב-Bitrix?

Bitrix משתמשת בגישה קלאסית: סקריפטים נכללים דרך Asset::getInstance()->addJs(), נשמרים במטמון ומקבלים גרסה דרך BX.htmlspecialchars (עבור קבצים סטטיים ללא hash). אבל מערכת המודולים ES, רכיבי .vue single-file, ו-tree-shaking דורשים bundler. בלעדיו, אתה מקבל:

• Scope גלובלי — התנגשויות בין window.Vue ל-BX.Vue
• אין HMR — כל שינוי דורש F5
• חבילות ענק — כל הקוד בקובץ אחד ללא פיצול chunks

איך Vite מאיץ את הפיתוח?

Vite מספקת התנעה מיידית: שרת dev עם HMR שמשתמש ב-ESM טבעי וב-ESBuild ל-pre-bundling של תלויות, בניות production מהירות דרך Rollup, ו-TypeScript מובנה. עבור Bitrix, זה אומר שאתה עורך רכיב .vue ושינויים מופיעים בזמן אמת ללא F5. פרויקטים של Vue 3 Bitrix נהנים מביצועים טובים יותר. לפי המדידות שלנו, פיתוח על Vite מהיר פי 5 מאשר על Webpack, והחבילה הסופית קטנה ב-30% בזכות tree-shaking. ויקיפדיה מציינת ש-Vite היא סטנדרט מודרני.

דוגמה מהשטח: בפרויקט עם קטלוג של 50,000 מוצרים, הגדרנו Vite עם פיצול chunks — זמן טעינת העמוד הראשי ירד מ-8 ל-2 שניות. תוצאה כזו בלתי אפשרית ללא bundler.

תצורת Vite בסיסית עם פיצול chunks וטעינה עצלה באמצעות dynamic import():

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  root: 'local/vue-src',
  build: {
    outDir: '../../local/dist',
    emptyOutDir: true,
    manifest: true,
    rollupOptions: {
      input: {
        catalog: 'local/vue-src/catalog/main.js',
        cart: 'local/vue-src/cart/main.js',
        lk: 'local/vue-src/lk/main.js',
      },
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'pinia', 'vue-router'],
        },
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'local/vue-src')
    },
  },
});

אינטגרציית PHP דרך manifest.json — הדרך היחידה להבטיח קבצים עם hash נכון לאחר כל deployment. מטמון Bitrix עם תגים יחד עם manifest.json מבטיח גרסת נכסים נכונה:

// helpers/vite.php
function viteAsset(string $entry): string {
    $manifest = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/local/dist/.vite/manifest.json'), true);
    return '/local/dist/' . $manifest[$entry]['file'];
}

// В шаблоне
\Bitrix\Main\Page\Asset::getInstance()->addJs(viteAsset('catalog/main.js'));

איך להגדיר שרת dev של Vite עם proxy ל-Bitrix?

1. התקן את Vite ואת הפלאגין של Vue: // vite.config.js import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import path from 'path'; export default defineConfig({ plugins: [vue()], root: 'local/vue-src', build: { outDir: '../../local/dist', emptyOutDir: true, manifest: true, rollupOptions: { input: { catalog: 'local/vue-src/catalog/main.js', cart: 'local/vue-src/cart/main.js', lk: 'local/vue-src/lk/main.js', }, output: { manualChunks: { 'vue-vendor': ['vue', 'pinia', 'vue-router'], }, }, }, }, resolve: { alias: { '@': path.resolve(__dirname, 'local/vue-src') }, }, }); בתיקיית // helpers/vite.php function viteAsset(string $entry): string { $manifest = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/local/dist/.vite/manifest.json'), true); return '/local/dist/' . $manifest[$entry]['file']; } // В шаблоне \Bitrix\Main\Page\Asset::getInstance()->addJs(viteAsset('catalog/main.js')); .
2. צור npm create vite@latest -- --template vue עם root, נקודות כניסה, ו-aliases (כמו בדוגמה למעלה).
3. הגדר proxy לבקשות ל-Bitrix:

server: {
  proxy: {
    '/bitrix': 'http://localhost',
    '/local': 'http://localhost',
    '/api': 'http://localhost',
  },
  https: false,
},

4. הוסף helper PHP local/vue-src עבור מצב production ו-dev עם סקריפטים מסוג module.
5. הרץ vite.config.js — הבנייה מוכנה.

מתי כדאי לבחור ב-Webpack?

אם הפרויקט כבר משתמש ב-Laravel Mix או שהצוות בקיא ב-Webpack, היא נשארת אפשרות viable. אבל שים לב: בניית dev איטית פי 3–5 מ-Vite. התצורה פשוטה יותר:

// webpack.config.js для Битрикс
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: {
    catalog: './local/vue-src/catalog/main.js'
  },
  output: {
    path: path.resolve(__dirname, 'local/dist'),
    filename: '[name].[contenthash].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
    ],
  },
  plugins: [new VueLoaderPlugin()],
};

השוואה בין Vite ל-Webpack עבור Bitrix:

בפועל, Vite מתאימה ל-80% מהפרויקטים. אנחנו בוחרים ב-Webpack אם יש צורך ב-loaders ספציפיים (למשל, עבור מנועי תבניות PHP) או התאמה אישית עמוקה.

מה כלול בהגדרה turnkey?

לוח זמנים: מיום אחד לפרויקטים פשוטים עם נקודת כניסה אחת ועד 5 ימים עבור 10+ יישומי SPA. התמחור נקבע באופן אישי.

אנחנו מספקים אחריות תאימות ל-6 חודשים עם עדכוני Bitrix. אם הבנייה נשברת לאחר patch, אנחנו מתקנים אותה בחינם. הניסיון שלנו עם 20+ פרויקטים מאפשר לנו לצפות בעיות טיפוסיות.

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