JavaScript性能优化实战（7）：代码分割与懒加载实战

最新推荐文章于 2025-07-13 20:38:46 发布

原创

最新推荐文章于 2025-07-13 20:38:46 发布 · 1.2k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

JavaScript性能优化实战 10w+人浏览 191人参与

前言

随着前端应用规模的不断扩大，JavaScript包体积膨胀问题日益突出。用户无需在初次加载时就获取整个应用的所有代码，而应该按需加载真正需要的部分。本文将深入探讨代码分割与懒加载技术，帮助开发者构建高性能的现代Web应用。

代码分割基础与原理

为什么需要代码分割？

在传统的单页应用开发中，如果不进行任何优化，打包工具会将所有JavaScript代码合并成一个巨大的bundle文件。这种方式存在以下问题：

初始加载时间过长：即使用户只需访问应用的一个小部分，也必须下载整个应用的代码
资源浪费：很多代码可能永远不会被执行
缓存效率低下：任何微小的代码变更都会使整个bundle失效，需要重新下载

代码分割（Code Splitting）正是为解决这些问题而生的技术，它允许我们：

将应用拆分成多个较小的chunks（代码块）
按需加载这些chunks，而不是一次性加载全部代码
实现更细粒度的缓存控制
显著改善应用的初始加载性能

代码分割的核心原理

代码分割的本质是将代码库分解成更小的、可独立请求的代码块，这些代码块可以在需要时动态加载。其工作原理可以概括为：

静态分析：打包工具在构建过程中分析模块依赖图
分割点识别：根据配置或特定语法（如动态import()）确定分割点
生成多个chunks：将代码库根据分割点拆分成多个独立的chunks
运行时加载：应用运行时，根据需要动态加载这些chunks

代码分割主要有两种实现方式：

静态代码分割：在构建时就确定分割点，通常通过配置实现

// webpack.config.js
module.exports = {
     
     
  // ...
  optimization: {
     
     
    splitChunks: {
     
     
      chunks: 'all',
      // 更多配置...
    }
  }
};

动态代码分割：使用动态import()语法，在运行时确定分割点

// 动态导入语法示例
button.addEventListener('click', async () => {
     
     
  const module = await import('./heavy-module.js');
  module.doSomething();
});

懒加载与代码分割的关系

懒加载（Lazy Loading）是代码分割的一种应用方式，它推迟加载非关键资源直到真正需要它们的时候。

在前端应用中，懒加载通常表现为：

组件懒加载：仅当组件需要渲染时才加载其代码
路由懒加载：仅当用户导航到特定路由时才加载该路由相关代码
资源懒加载：如图片、视频等大型媒体资源在进入视口前不加载

代码分割提供了技术基础，而懒加载则是这种技术的实际应用策略。

代码分割对性能的影响

代码分割带来的性能提升主要体现在：

初始加载时间减少：首次加载只需下载核心代码，可减少50%甚至更多的初始加载时间
交互时间（TTI）提前：核心功能代码更快加载完成，用户可以更早开始交互
网络利用率提高：按需加载资源避免了不必要的网络传输
缓存命中率提升：更细粒度的chunks意味着代码变更时，只有变更部分需要重新下载

下面是一个典型的性能对比图示：

未优化应用加载过程：
|----- 加载全部JS (2MB) -----|--解析执行--|--渲染--|
                                                  用户可交互
                                                  
代码分割后的加载过程：
|-加载核心JS (500KB)-|--解析执行--|--渲染--|
                                        用户可交互
                      |---按需加载其他模块 (1.5MB)---|

在接下来的章节中，我们将深入探讨如何在现代前端项目中实施代码分割与懒加载策略，以及各种工具和框架提供的支持。

现代打包工具中的代码分割配置

现代前端开发离不开各种打包工具，而这些工具都提供了强大的代码分割功能。本节将详细介绍几种主流打包工具的代码分割配置方法。

Webpack中的代码分割

作为最流行的前端打包工具之一，Webpack提供了丰富的代码分割选项。

SplitChunksPlugin

自Webpack 4开始，内置的SplitChunksPlugin取代了之前的CommonsChunkPlugin，提供了更加灵活的代码分割能力。

基本配置示例：

// webpack.config.js
module.exports = {
   
   
  // ...
  optimization: {
   
   
    splitChunks: {
   
   
      chunks: 'all', // 对所有模块进行分割（还有'async'和'initial'选项）
      minSize: 20000, // 生成chunk的最小大小（字节）
      minChunks: 1, // 模块被引用次数超过1次才会被分割
      maxAsyncRequests: 30, // 同时加载的异步请求数量不超过30个
      maxInitialRequests: 30, // 入口文件加载的分割文件数量不超过30个
      automaticNameDelimiter: '~', // 分隔符
      cacheGroups: {
   
   
        vendors: {
   
   
          test: /[\\/]node_modules[\\/]/, // 匹配node_modules中的模块
          priority: -10, // 优先级
          name: 'vendors' // 命名
        },
        default: {
   
   
          minChunks: 2, // 至少被引用两次才会被分离到default组
          priority: -20,
          reuseExistingChunk: true // 重用已存在的chunk
        }
      }
    }
  }
};

实际案例分析：优化React应用

在一个中大型React应用中，我们可以进一步优化分割策略：

// webpack.config.js 针对React项目的优化配置
module.exports = {
   
   
  // ...
  optimization: {
   
   
    runtimeChunk: 'single', // 将webpack运行时代码提取到单独文件
    splitChunks: {
   
   
      chunks: 'all',
      maxInitialRequests: Infinity, // 不限制初始加载的请求数量
      minSize: 0, // 不限制最小大小
      cacheGroups: {
   
   
        vendor: {
   
   
          // 更精细的vendor分组策略
          test: /[\\/]node_modules[\\/]/,
          name(module) {
   
   
            // 按包名生成独立的vendor chunks
            const packageName = module.context.match(
              /[\\/]node_modules[\\/](.*?)([\\/]|$)/
            )[1];
            return `vendor.${
     
     packageName.replace('@', '')}`;
          }
        },
        // React相关库单独打包
        reactVendor: {
   
   
          test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,
          name: 'vendor-react',
          priority: 20 // 优先级高于其他vendor
        },
        // UI库单独打包
        uiVendor: {
   
   
          test: /[\\/]node_modules[\\/](antd|@material-ui)[\\/]/,
          name: 'vendor-ui',
          priority: 10
        },
        // 工具库单独打包
        utilityVendor: {
   
   
          test: /[\\/]node_modules[\\/](lodash|moment|axios)[\\/]/,
          name: 'vendor-utility',
          priority: 5
        }
      }
    }
  }
};

这种配置可以将不同类型的依赖分离成独立的chunks，有利于更细粒度的缓存控制。

Webpack中分析打包结果

为了验证代码分割效果，我们可以使用webpack-bundle-analyzer插件生成直观的包体积分析报告：

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
   
   
  // ...
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

生成的报告可以清晰地展示各个chunks的大小和依赖关系，帮助我们优化分割策略。

Vite中的代码分割配置

Vite作为新一代前端构建工具，在开发环境下利用浏览器原生ESM能力，无需打包；在生产环境则使用Rollup进行打包。

Vite默认提供了智能的代码分割策略，通常不需要过多配置。但我们仍可以根据需要进行自定义：

// vite.config.js
export default {
   
   
  build: {
   
   
    rollupOptions: {
   
   
      output: {
   
   
        manualChunks: {
   
   
          // 将React相关库打包在一起
          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
          // 将所有UI库打包在一起
          'ui-vendor': ['antd', '@material-ui/core'],
          // 将工具库打包在一起
          'utils': ['lodash', 'axios', 'dayjs']
        }
      }
    }
  }
};

对于更复杂的分割逻辑，可以使用函数形式：

// vite.config.js
export default {
   
   
  build: {
   
   
    rollupOptions: {
   
   
      output: {
   
   
        manualChunks(id) {
   
   
          if (id.includes('node_modules')) {
   
   
            // 将node_modules中的每个包单独打包
            const packageName = id.match(/node_modules\/(.+?)(?:\/|$)/)[1];
            return `vendor.${
     
     packageName}`;
          }
        }
      }
    }
  }
};

Next.js中的代码分割

Next.js是基于React的全栈框架，提供了开箱即用的代码分割特性：

自动的页面分割：Next.js会自动将每个页面文件作为独立的entry point，实现页面级代码分割

动态导入组件：结合React的懒加载特性

// pages/index.js
import dynamic from 'next/dynamic';

// 懒加载组件
const DynamicComponent = dynamic(() => import('../components/heavy-component'), {
  loading: () => <p>加载中...</p>,
  ssr: false // 可选，设置为false禁用服务端渲染
});

export default function Home() {
  return (
    <div>
      <h1>首页</h1>
      <DynamicComponent />
    </div>
  );
}

自定义Webpack配置：虽然大多数情况下不需要，但Next.js允许扩展其内部Webpack配置

// next.config.js
module.exports = {
     
     
  webpack: (config, {
      
       isServer }) => {
     
     
    // 自定义webpack配置
    if (!isServer) {
     
     
      config.optimization.splitChunks.cacheGroups.commons = {
     
     
        name: 'commons',
        chunks: 'all',
        minChunks: 20,
      };
    }
    return config;
  },
};

Vue CLI中的代码分割

Vue CLI基于Webpack构建，提供了简化的配置方式：

// vue.config.js
module.exports = {
   
   
  chainWebpack: config => {
   
   
    config.optimization.splitChunks({
   
   
      cacheGroups:

最低0.47元/天解锁文章

200万优质内容无限畅学