---
url: /guide/dep-pre-bundling.md
---
# پیش‌بسته‌بندی(پیش‌باندل) وابستگی

زمانی‌که شما `vite` را برای اولین بار اجرا می‌کنید Vite وابستگی‌های پروژه شما را قبل از لود لوکال سایت شما، پیش‌بسته‌بندی می‌کند. این فرایند به صورت پیشفرض، اتوماتیک و شفاف انجام می‌شود.

## چرایی

این چیزی‌است که در Vite "پیش‌بسته‌بندی وابستگی" می‌نامیم. این فرایند دو هدف دارد:

1. **سازگاری CommonJS and UMD:**  در زمان توسعه، در حالت Vite dev تمام کدها به شکل ماژول native ESM آماده می‌شوند. پس Vite باید وابستگی‌هایی که به شکل CommonJs یا UMD هستند را ابتدا به ESM تبدیل کند.

   زمانی که Vite دارد وابستگی‌های CommonJsای را  تبدیل می‌کند،  آنالیز هوشمندانه‌ی import را اجرا می‌کند تا importهای نامگذاری شده‌ی ماژول‌های CommonJS همانطور که انتظار می‌رود بتوانند کار کنند حتی اگر export ها به صورت داینامیک نسبت داده شده باشند (مانند React):

   ```js
   // مطابق انتظار کار می‌کند
   import React, { useState } from 'react'
   ```

2. **بازدهی:** Vite وابستگی‌های ESM با ماژول‌های داخلی بسیار را تبدیل به یک ماژول می‌کند تا بازدهی‌ لودهای بعدی صفحه را بهبود دهد.

   بعضی از پکیج‌ها، ماژول‌های ES خود را به شکل چندین فایل جداگانه که یکدیگر را import کرده‌اند بیلد کرده و همراه خود می‌آورند. برای مثال، [`lodash-es` بیش از ۶۰۰ ماژول داخلی دارد](https://unpkg.com/browse/lodash-es/)! وقتی ما این کار را می‌کنیم`import { debounce } from 'lodash-es'‎`، مرورگر بیش از ۶۰۰ درخواست HTTP را همزمان ارسال می‌کند! حتی با وجود اینکه سرور مشکلی با هندل کردن آنها ندارد، تعداد زیاد درخواست‌ها باعث ازدحام در سمت مرورگر می‌شود که همین امر باعث کندتر لود شدن صفحه به شکل قابل‌ ملاحظه‌ای می‌گردد.

   به جای این، با پیش‌بسته‌بندیِ `lodash-es` در یک ماژول حالا ما تنها به یک HTTP درخواست نیاز داریم!

::: tip نکته
پیش‌بسته‌بندی وابستگی فقط در حالت توسعه(development) اعمال می‌شود و از `esbuild` برای تبدیل وابستگی‌ها به ESM استفاده می‌شود. در حالت production به جای آن از ‎`@rollup/plugin-commonjs` استفاده می‌شود.
:::

## یافتن خودکار وابستگی

اگر کشی موجود نباشد، Vite کد شما را می‌کاود و به صورت اتوماتیک وابستگی‌های importها را پیدا می‌کند(مانند "bare imports" که انتظار می‌رود از `node_modules` خوانده شود) و از این importهای پیدا شده به عنوان نقاط ورودی پیش‌بسته‌بندی استفاده کند. فرایند پیش‌بسته‌بندی از `esbuild` استفاده می‌کند پس معمولا بسیار سریع است.

بعد از شروع به‌کار سرور، اگر یک وابستگی import جدید مشاهده شود که در کش موجود نیست، Vite دوباره فرایند پیش‌بسته‌بندی وابستگی را اجرا کرده و در صورت نیاز صفحه را مجددا لود می‌کند.

## مخزن یکپارچه (Monorepos) و وابستگی‌های مرتبط(Linked Dependencies)

در یک مخزن یکپارچه، یک وابستگی ممکن است به یک پکیج در همان مخزن مرتبط باشد. Vite به صورت خودکار وابستگی‌هایی که از `node_modules` فراخوانی نمی‌شوند را شناسایی کرده و با آن وابستگی مانند یک سورس کد عمل می‌کند. این کار تلاشی برای بسته‌بندی کردن آن وابستگی مرتبط نیست بلکه آنالیز لیست وابستگی‌ِ آن وابستگی مرتبط است.

گرچه، این امر نیازمند این است که وابستگی مرتبط به صورت ESM export شده باشد. اگر به این شکل نبود شما می‌توانید وابستگی را در تنظیماتتان به [`optimizeDeps.include`](/config/dep-optimization-options.md#optimizedeps-include)و[`build.commonjsOptions.include`](/config/build-options.md#build-commonjsoptions) اضافه کنید.

```js twoslash [vite.config.js]
import { defineConfig } from 'vite'
// ---cut---
export default defineConfig({
  optimizeDeps: {
    include: ['linked-dep'],
  },
  build: {
    commonjsOptions: {
      include: [/linked-dep/, /node_modules/],
    },
  },
})
```

هنگامی که تغییراتی در وابستگیِ مرتبط می‌دهید، dev server را با قابلیت دستور ‎`--force` ریست کنید تا تغییرات اعمال شوند.

## اختصاصی‌کردن رفتار

روش‌های پیشفرض کشف وابستگی ممکن است همیشه مطلوب نباشند. در مواردی که شما مشخصا می‌خواهید وابستگی ها را از لیست include/exclude کنید از [`optimizeDeps` config options](/config/dep-optimization-options.md) استفاده کنید.

یک مورد مرسوم برای `optimizeDeps.include` یا `optimizeDeps.exclude` زمانی است که شما یک importای دارید که مستقیما قابل کشف در سورس کد نیست. برای مثال، شاید آن import در نتیجه‌ی تغییر پلاگینی بوجود آمده است. این به این معنا است که Vite قادر به یافتن آن import در اسکن اولیه نخواهد بود - بلکه تنها زمانی که  توسط مرورگر درخواست داده شود و تغییر(transformed) پیدا کند قابل مشاهده می‌گردد. این موضوع باعث می‌شود سرور بلافاصله بعد از شروع، دوباره بسته‌بندی را انجام دهد.

هر دو حالت `include` و `exclude` می‌توانند برای این هدف مورد استفاده قرار گیرند. اگر وابستگی بزرگ باشد (به همراه ماژول‌های داخلی بسیاری) یا CommonJS باشد، پس شما باید آنرا include کنید؛ اگر وابستگی کوچک است و همین حالا هم ماژول ESM معتبری است، می‌توانید آنرا exclude کنید و اجازه دهید که مرورگر مستقیما آن‌ را لود کند.

همچنین شما می‌توانید esbuild را بیشتر نیز با [قابلیت`optimizeDeps.esbuildOptions`](/config/dep-optimization-options.md#optimizedeps-esbuildoptions) سفارشی‌سازی کنید. برای مثال، اضافه کردن یک پلاگین esbuild برای هندل کردن فایل‌های مخصوص در وابستگی‌ها یا تغییر [build `target`](https://esbuild.github.io/api/#target).

## کش‌کردن

### کش فایل‌سیستم (File System)

Vite وابستگی‌های پیش‌بسته‌بندی را در `node_modules/.vite` کش می‌کند. Vite اینکه نیاز به اجرای مجدد مرحله پیش‌بسته‌بندی هست یا نه را بر اساس چند منبع تشخیص می‌دهد:

* محتوای package manager lockfile مثل: `package-lock.json`, `yarn.lock`, `pnpm-lock.yaml` یا `bun.lockb`.
* زمان تغییر پوشه patches.
* فیلدهای مرتبط در `vite.config.js`، در صورت وجود.
* مقدار `NODE_ENV`.

مرحله پیش‌بسته‌بندی تنها زمانی نیاز به اجرای مجدد دارد که یکی از موارد بالا تغییر کرده باشد.

اگر به دلایلی می‌خواهید که Vite را مجبور به انجام پیش‌بسته‌بندی وابستگی‌ کنید، یا می‌توانید سرور dev را با گزینه دستور ‎`--force` اجرا کنید یا اینکه فایل `node_modules/.vite` پوشه کش را به صورت دستی پاک کنید.

### کش مرورگر {#browser-cache}

فراخوانی درخواست‌های وابستگی به خوبی با هدرهای HTTP `max-age=31536000,immutable` کش می‌شوند تا بازدهی بارگیری مجدد صفحه در حالت dev افزایش پیدا کند. وقتی که کش شدند، این درخواست‌ها دیگر هرگز به سرور dev ارسال نمی‌شوند. آنها زمانی که یک نسخه دیگر نصب شود به صورت خودکار با اضافه شدن ورژن کوئری (version query) ، غیرمعتبر می‌شوند(همانند آنچه که در لاک‌فایل پکیج منیجر شما دیده می‌شود). اگر می‌خواهید که وابستگی‌های خود را با تغییرات لوکال دیباگ کنید می‌توانید:

1. غیرفعال کردن موقت کش در تب Network در devtools مرورگر خود.
2. اجرای مجدد سرور dev با علامت ‎`--force` برای پیش‌بسته‌بندی مجدد وابستگی‌ها.
3. بارگیری مجدد صفحه.