การแยกโค้ดและเส้นทางแบบ Lazy

เหตุใดจึงต้องแบ่งโค้ด

การนำเข้าแบบไดนามิก import()

// Without split — entire heavy lib in main bundle:
import { generateChart } from 'heavy-chart-lib';

// With split — loaded only when needed:
button.addEventListener('click', async () => {
  const { generateChart } = await import('heavy-chart-lib');
  generateChart(data);
});

React.lazy() — การแบ่งโค้ดระดับองค์ประกอบ

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  );
}

การแบ่งโค้ดตามเส้นทางใน React Router

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const Home    = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin   = lazy(() => import('./pages/Admin'));

const router = createBrowserRouter([
  { path: '/',        element: <Suspense fallback={<Spinner/>}><Home /></Suspense> },
  { path: '/profile', element: <Suspense fallback={<Spinner/>}><Profile /></Suspense> },
  { path: '/admin',   element: <Suspense fallback={<Spinner/>}><Admin /></Suspense> }
]);

องค์ประกอบแบบอะซิงโครนัสของ Vue 3

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(() =>
  import('./Dashboard.vue')
);

// Use in template like a normal component

เส้นทางแบบโหลดเมื่อจำเป็นของ Vue Router

const routes = [
  { path: '/',        component: () => import('./pages/Home.vue') },
  { path: '/profile', component: () => import('./pages/Profile.vue') },
  { path: '/admin',   component: () => import('./pages/Admin.vue') }
];

คอมเมนต์พิเศษของ webpack

const Profile = lazy(() =>
  import(/* webpackChunkName: "profile", webpackPrefetch: true */ './Profile')
);

// Vite supports a subset; @vite-ignore for special cases

การดึงข้อมูลล่วงหน้าเทียบกับการโหลดล่วงหน้า

ตัววิเคราะห์ชุดรวม

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [visualizer({ open: true, gzipSize: true })]
};

การแยกส่วนย่อยของไลบรารีภายนอก

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-tooltip']
        }
      }
    }
  }
};

กรณีที่ไม่ควรแบ่งโค้ด

ตรวจสอบอย่างรวดเร็ว

สรุป: การแบ่งโค้ด