HTML 代码拆分优化

代码拆分将大型代码 bundle 拆分为小块，按需加载，显著提升首屏性能。

什么是代码拆分

将完整代码按路由、功能模块拆分，用户访问时只加载当前需要的代码，而非一次性加载全部。

实现方式

路由级别拆分

<!-- 使用动态 import 按路由加载 -->
<script type="module">
  // 用户访问 /dashboard 时才加载
  if (location.pathname === '/dashboard') {
    import('./dashboard.js');
  }
</script>

组件级别拆分

// React 懒加载示例
const Dashboard = React.lazy(() => import('./Dashboard'));

// Vue 异步组件
const Dashboard = () => import('./Dashboard.vue');

条件加载拆分

<button id="loadFeature">加载高级功能</button>
<script type="module">
  document.getElementById('loadFeature').addEventListener('click', async () => {
    const module = await import('./advanced-feature.js');
    module.init();
  });
</script>

Webpack 配置示例

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

拆分策略对比

注意事项

拆分粒度需平衡，过细增加 HTTP 请求开销，过粗失去拆分意义。

预加载关键拆分块可提升用户体验，使用 <link rel="prefetch"> 预取。

拆分后需确保错误边界处理，避免加载失败导致白屏。

要点总结

• 路由级别拆分是 SPA 首选策略
• 第三方库单独打包便于缓存
• 条件加载适用于非首屏功能
• 使用动态 import() 实现按需加载
• 合理设置拆分粒度，避免过细碎片化