چگونه Turbopack جاوا اسکریپت شما را خراب می کند

تب Network را در این صفحه باز کنید و لیستی از فایل های جاوا اسکریپت را با نام های به ظاهر تصادفی مشاهده خواهید کرد:

روی یکی از آنها کلیک کنید، آن را از بین ببرید، و چیزی شبیه به این پیدا خواهید کرد:

(globalThis.TURBOPACK || (globalThis.TURBOPACK = [])).push([
  "object" == typeof document ? document.currentScript : void 0,
  7284,
  (e) => {
    "use strict";
    function r() {
      for (var e, r, o = 0, t = "", l = arguments.length; o  l; o++) {
        // ...
      }
      return t;
    }
    e.s(["clsx", 0, r, "default", 0, r]);
  },
  395264,
  (e) => {
    "use strict";
    var r = e.i(7284);
    let o = function () {
      // ...
    };
  },
]);
 
//# debugId=e60a5ad0-3ac6-bb3a-e12b-6130e99fb7a6

این یک قطعه است. Turbopack ده‌ها مورد از آنها را برای برنامه Next.js شما تولید می‌کند که شامل کد شما، بسته‌هایی که به آن‌ها بستگی دارد و زمان اجرا که همه آن‌ها را به هم مرتبط می‌کند.

“Chunking” فرآیندی است که در آن تصمیم می گیریم کدام کد در کدام قطعه قرار گیرد. راه‌های زیادی برای انجام گروه‌بندی وجود دارد که هرکدام دارای معاوضه‌های خاص خود هستند.

بیایید با ساده ترین رویکرد شروع کنیم: یک تکه شامل تمام جاوا اسکریپت مورد استفاده برنامه شما.

اکنون این قسمت برای هر صفحه بارگذاری می شود. و از آنجایی که هر صفحه یک تکه را به اشتراک می‌گذارد، هر بارگذاری بعد از اولین بار یک ضربه کش است. تمیز. ناوبری سریع خواهد بود.

با این حال، احتمالاً قبلاً متوجه این مبادله شده اید. بارگیری یک صفحه با جاوا اسکریپت کم یا بدون جاوا اسکریپت همچنان به معنای بارگیری جاوا اسکریپت برای هر صفحه دیگر است. ugh با رشد سایت شما، بارگذاری هر صفحه سخت تر و سخت تر می شود. این در دراز مدت امکان پذیر نیست.

ما می توانیم به یک قطعه در هر صفحه حرکت کنیم. این تکه ها را نازک نگه می دارد و ما هرگز کد را اضافه بار نمی کنیم. کامل!

اما پس از آن ما حافظه پنهان را از دست خواهیم داد. اگر هر صفحه استفاده می کند