代碼分割對現(xiàn)代Web性能至關(guān)重要，能顯著提升加載速度和用戶體驗。1. 在React中使用React.lazy和Suspense實現(xiàn)路由級代碼分割，僅在需要時加載組件，并通過Suspense顯示加載狀態(tài)；2. Vue中使用defineAsyncComponent或動態(tài)import()實現(xiàn)異步組件加載，支持錯誤處理和延遲加載；3. 路由級分割是最有效的起點，因與用戶導(dǎo)航一致且工具鏈自動支持；4. 通過Webpack或Vite配置提取共享依賴，避免重復(fù)加載第三方庫；5. 避免過度分割、合理使用預(yù)加載、監(jiān)控包體積并優(yōu)雅處理加載狀態(tài)，以實現(xiàn)最佳性能。正確實施代碼分割可讓React或Vue應(yīng)用更快速響應(yīng)。

Code splitting is no longer a nice-to-have — it’s essential for modern web performance. As React and Vue apps grow in complexity, loading everything upfront leads to slow initial loads and poor user experience. Code splitting helps by breaking your JavaScript bundle into smaller chunks, loading only what’s needed when it’s needed.

Here’s how to implement effective code splitting in both React and Vue apps.

Why Code Splitting Matters

Large bundles mean longer download, parse, and execute times — especially on mobile or slow networks. Code splitting improves:

• Initial load time: Users see content faster.
• Memory usage: Less unused code in memory.
• Caching efficiency: Smaller, more focused chunks can be cached independently.

The key idea: split at natural boundaries, like routes, components, or feature modules.

Code Spliting in React with React.lazy and Suspense

React provides built-in support for lazy loading components using React.lazy and Suspense.

import { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const HomePage = lazy(() => import('./pages/HomePage'));
const AboutPage = lazy(() => import('./pages/AboutPage'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

Key Points:

• React.lazy only works with default exports.
• Suspense lets you show a fallback while the component loads.
• Best used at route level — ideal for splitting by page.

? Note: For server-side rendering (SSR), you’ll need additional tooling (like Next.js or custom webpack loaders) since React.lazy is client-side only.

You can also split non-route components:

const CommentSection = lazy(() => import('./components/CommentSection'));

But only do this for heavy, below-the-fold components.

Code Splitting in Vue with Async Components

Vue handles async components natively using defineAsyncComponent (Vue 3) or dynamic import().

import { defineAsyncComponent } from 'vue';
import { createRouter } from 'vue-router';

const HomePage = () => import('../views/HomePage.vue');
const AboutPage = defineAsyncComponent(() =>
  import('../views/AboutPage.vue')
);

const routes = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage }
];

const router = createRouter({ history: createWebHistory(), routes });

Differences:

• Using import() directly in routes automatically enables code splitting (Vue Router + Vite or webpack).
• defineAsyncComponent gives more control (e.g., error handling, loading delays):

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  delay: 200,
  errorComponent: ErrorComponent,
  timeout: 5000
});

This is useful for non-route components that are expensive to load.

Route-Based Splitting: The Lowest-Hanging Fruit

Both React and Vue benefit most from route-level splitting because:

• It aligns with user navigation.
• Tools like React Router and Vue Router integrate seamlessly with bundlers.
• Each route becomes a separate chunk automatically when using dynamic import().

Webpack, Vite, and other bundlers detect import() and split accordingly — no extra config needed in most cases.

? Pro tip: Name your chunks for better debugging:

const AboutPage = lazy(() => import(/* webpackChunkName: "about-page" */ './pages/AboutPage'));

In Vue with Vite, use:

() => import('../views/About.vue').then(m => m.default)
// Vite handles naming automatically in most cases

Advanced: Splitting Libraries and Shared Code

Even with route splitting, you might end up duplicating libraries (e.g., Lodash, date-fns). Use your bundler to extract shared dependencies.

In Webpack:

// webpack.config.js
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
      },
    },
  },
}

This creates a separate vendors.chunk.js for third-party packages.

In Vite:

Vite automatically splits vendor code. You can customize it:

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router'],
          'ui-lib': ['element-plus'],
        }
      }
    }
  }
})

This gives you fine-grained control over what goes where.

Gotchas and Best Practices

• Don’t over-split: Too many small chunks increase HTTP overhead.
• Avoid lazy loading everything: Only split large, infrequently used components.
• Monitor bundle size: Use tools like Webpack Bundle Analyzer or Vite’s rollup-plugin-visualizer.
• Preload critical chunks: Use <link rel="modulepreload"> (Vite) or webpack’s magic comments:

  import(/* webpackPreload: true */ './CriticalComponent')

• Handle loading states gracefully: Use skeletons or spinners to improve perceived performance.

---

Code splitting, when done right, makes your React or Vue app feel fast and responsive. Start with route-based splitting, then optimize shared code and heavy components. The tools are built in — you just need to use them.

Basically: split by route, lazy load what matters, and let your bundler handle the rest.

The above is the detailed content of Code Splitting in Modern Web Apps: A Guide for React and Vue. For more information, please follow other related articles on the PHP Chinese website!