代码分割与懒加载

// 静态导入：构建时确定，打进主包
import { heavyUtil } from './heavy-util';

// 动态导入：运行时按需加载，单独切出一个 chunk
button.addEventListener('click', async () => {
  // 只有用户点击按钮，才会去下载这段代码
  const { heavyUtil } = await import('./heavy-util');
  heavyUtil();
});

// 动态导入配合错误处理与加载态
async function loadEditor() {
  try {
    showSpinner();
    const { createEditor } = await import('./rich-editor');
    return createEditor();
  } catch (err) {
    console.error('富文本编辑器加载失败', err);
    showError('编辑器加载失败，请刷新重试');
  } finally {
    hideSpinner();
  }
}

// 指定 chunk 名字，便于在网络面板中识别
const module = await import(
  /* webpackChunkName: "chart" */
  './chart'
);

// 预取：空闲时提前下载（未来可能用到）
import(
  /* webpackChunkName: "settings" */
  /* webpackPrefetch: true */
  './settings-page'
);

// 预载：与父 chunk 并行下载（当前导航很可能马上用到）
import(
  /* webpackChunkName: "login-modal" */
  /* webpackPreload: true */
  './login-modal'
);

import React, { Suspense, lazy } from 'react';

// 组件级懒加载
const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  const [showChart, setShowChart] = React.useState(false);
  return (
    <div>
      <button onClick={() => setShowChart(true)}>显示图表</button>
      {showChart && (
        <Suspense fallback={<div>图表加载中...</div>}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  );
}

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

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

// 用高阶函数统一包裹 Suspense，避免重复
function withSuspense(Component) {
  return (
    <Suspense fallback={<PageLoading />}>
      <Component />
    </Suspense>
  );
}

const router = createBrowserRouter([
  { path: '/', element: withSuspense(Home) },
  { path: '/dashboard', element: withSuspense(Dashboard) },
  { path: '/settings', element: withSuspense(Settings) },
]);

function App() {
  return <RouterProvider router={router} />;
}

// 带重试的懒加载封装
function lazyWithRetry(importFn, retries = 3, interval = 500) {
  return lazy(() =>
    new Promise((resolve, reject) => {
      const attempt = (n) => {
        importFn()
          .then(resolve)
          .catch((error) => {
            if (n <= 0) {
              // 常见于发布后旧 chunk 被清理，强制刷新拿新资源
              window.location.reload();
              reject(error);
              return;
            }
            setTimeout(() => attempt(n - 1), interval);
          });
      };
      attempt(retries);
    })
  );
}

const Reports = lazyWithRetry(() => import('./pages/Reports'));

// Vue Router 路由懒加载
const routes = [
  {
    path: '/dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ './Dashboard.vue'),
  },
];

// defineAsyncComponent 完整配置
import { defineAsyncComponent } from 'vue';

const AsyncChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorFallback,
  delay: 200,      // 展示 loading 前的延迟，避免闪烁
  timeout: 10000,  // 超时后展示 errorComponent
});

module.exports = {
  optimization: {
    // 把 webpack 运行时抽成单独文件，业务代码变化时它不变，缓存更稳定
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',        // 同时处理异步和同步导入
      minSize: 20000,       // 生成 chunk 的最小体积（字节）
      maxSize: 244000,      // 超过则尝试进一步拆分，利于缓存
      minChunks: 1,         // 模块被引用多少次才拆分
      maxAsyncRequests: 30, // 按需加载时最大并行请求数
      maxInitialRequests: 30, // 入口点最大并行请求数
      cacheGroups: {
        // 把体积大、更新慢的框架单独抽出，长期缓存
        framework: {
          test: /[\\/]node_modules[\\/](react|react-dom|scheduler)[\\/]/,
          name: 'framework',
          priority: 40,
        },
        // 其余第三方库
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          priority: 20,
        },
        // 被多处复用的公共业务代码
        common: {
          minChunks: 2,
          priority: 10,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (id.includes('react')) return 'framework';
            if (id.includes('echarts')) return 'charts';
            return 'vendor';
          }
        },
      },
    },
    chunkSizeWarningLimit: 500, // 超过 500KB 警告
  },
};

<!-- preload：当前页面关键资源，高优先级，提前下载 -->
<link rel="preload" as="font" href="/fonts/main.woff2" crossorigin>
<link rel="preload" as="image" href="/hero.webp">

<!-- prefetch：未来可能用到的资源，空闲时低优先级下载 -->
<link rel="prefetch" href="/js/next-page.chunk.js">

<!-- preconnect：提前建立连接（DNS + TCP + TLS） -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

<!-- dns-prefetch：仅提前做 DNS 解析，兼容性兜底 -->
<link rel="dns-prefetch" href="https://api.example.com">

// 鼠标悬停链接时，提前加载目标路由的代码
const prefetched = new Set();

function prefetchOnHover(link, importFn) {
  link.addEventListener('mouseenter', () => {
    if (prefetched.has(link.href)) return;
    prefetched.add(link.href);
    importFn(); // 触发动态 import，chunk 提前进缓存
  }, { once: true });
}

prefetchOnHover(
  document.querySelector('a[href="/reports"]'),
  () => import('./pages/Reports')
);

// 一个最简 Service Worker 预缓存示例
const CACHE = 'app-v1';
const PRECACHE = ['/', '/index.html', '/js/main.chunk.js', '/css/main.css'];

self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(CACHE).then((c) => c.addAll(PRECACHE)));
});

self.addEventListener('fetch', (event) => {
  // 缓存优先，命中直接返回，未命中走网络
  event.respondWith(
    caches.match(event.request).then((res) => res || fetch(event.request))
  );
});

// ❌ 全量导入，可能把整个库打进包（取决于库是否支持 ESM）
import _ from 'lodash';
_.debounce(fn, 300);

// ✅ 按需导入，配合 Tree Shaking 只保留用到的部分
import debounce from 'lodash-es/debounce';
debounce(fn, 300);

// package.json 中标记无副作用，帮助打包器安全删除未用导出
// {
//   "sideEffects": false
// }

// 滚动进入视口才加载评价模块
const reviewSlot = document.querySelector('#reviews');
const io = new IntersectionObserver((entries) => {
  entries.forEach(async (entry) => {
    if (entry.isIntersecting) {
      const { renderReviews } = await import('./reviews');
      renderReviews(entry.target);
      io.unobserve(entry.target);
    }
  });
}, { rootMargin: '200px' }); // 提前 200px 预加载，避免用户看到空白

io.observe(reviewSlot);

import dynamic from 'next/dynamic';

// 关闭 SSR：某些只在浏览器可用的库（如地图、图表）必须这样
const MapView = dynamic(() => import('../components/MapView'), {
  ssr: false,
  loading: () => <p>地图加载中...</p>,
});

// 命名导出也可以懒加载
const Chart = dynamic(() =>
  import('../components/charts').then((mod) => mod.BarChart)
);

export default function Page() {
  return (
    <div>
      <MapView />
      <Chart />
    </div>
  );
}

<template>
  <!-- 组件名加 Lazy 前缀，Nuxt 自动懒加载 -->
  <LazyHeavyChart v-if="show" />
</template>

const routes: Routes = [
  {
    path: 'admin',
    // loadChildren 触发独立 chunk，进入路由才下载
    loadChildren: () =>
      import('./admin/admin.module').then((m) => m.AdminModule),
  },
];

// host 应用 webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        // 运行时从远程加载子应用暴露的模块
        cart: 'cart@https://cdn.example.com/cart/remoteEntry.js',
      },
      shared: {
        // 共享依赖，避免重复加载 React
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

// 使用远程模块
const RemoteCart = React.lazy(() => import('cart/Cart'));

# webpack
npm i -D webpack-bundle-analyzer
# 在 webpack 配置里加插件后构建，会打开交互式树图

# Vite
npm i -D rollup-plugin-visualizer

# 通用：基于 source map 分析线上产物
npx source-map-explorer dist/js/*.js

// webpack.config.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false }),
  ],
};

// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer';
export default {
  plugins: [visualizer({ filename: 'stats.html', gzipSize: true })],
};

// 根据网络状况自适应：弱网时不做激进 prefetch
const conn = navigator.connection;
const saveData = conn && conn.saveData;
const slow = conn && /2g/.test(conn.effectiveType);

function maybePrefetch(importFn) {
  if (saveData || slow) return; // 省流量模式/弱网：跳过预取
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => importFn());
  } else {
    setTimeout(importFn, 2000);
  }
}

maybePrefetch(() => import('./pages/Reports'));

// echarts 按需引入，只打进用到的图表类型
import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);

// webpack 性能预算：超限则构建告警/失败
module.exports = {
  performance: {
    hints: 'error',            // 超限直接报错，阻断合并
    maxEntrypointSize: 250000, // 入口点最大 250KB
    maxAssetSize: 250000,      // 单资源最大 250KB
  },
};

// .size-limit.js
module.exports = [
  { path: 'dist/main.*.js', limit: '100 KB', gzip: true },
  { path: 'dist/framework.*.js', limit: '45 KB', gzip: true },
];
// package.json scripts: "size": "size-limit"
// CI 中运行 npm run size，超限退出码非 0，阻断发布

import { Suspense } from 'react';

function Page() {
  return (
    <>
      <Header />                {/* 立即渲染 */}
      <Suspense fallback={<Skeleton />}>
        <SlowComments />        {/* 数据就绪后流式补齐，不阻塞首屏 */}
      </Suspense>
    </>
  );
}