如何配置JS代码分割？

JS代码分割通过动态import()和构建工具将应用拆分为按需加载的chunk，提升加载速度与用户体验。

配置JavaScript代码分割，核心思路在于将你的应用代码拆分成更小、更独立的块（chunks），只在需要时才加载它们。这通常通过JavaScript的动态

import()

配置JS代码分割，最直接也最常用的方式是利用JavaScript原生的动态

import()

import('./some-module.js')

some-module.js

以Webpack为例，它对代码分割的支持非常成熟。当你使用动态

import()

optimization.splitChunks

node_modules

chunks: 'all'

// webpack.config.js
module.exports = {
  // ... 其他配置
  optimization: {
    splitChunks: {
      chunks: 'all', // 关键：告诉Webpack优化所有类型的chunks
      minSize: 20000, // 模块的最小体积（字节），小于此值的不会被分割
      minRemainingSize: 0, // 确保拆分后剩余的最小块大小
      minChunks: 1, // 模块被引用次数，大于或等于此值的才会被分割
      maxAsyncRequests: 30, // 按需加载时的最大并行请求数
      maxInitialRequests: 30, // 入口点的最大并行请求数
      enforceSizeThreshold: 50000, // 强制执行的阈值，无论minSize如何
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/, // 匹配node_modules中的模块
          priority: -10, // 优先级，数字越大优先级越高
          reuseExistingChunk: true, // 如果该chunk已经被打包，则使用它
          name: 'vendors', // 指定chunk名称
        },
        common: {
          minChunks: 2, // 至少被两个模块引用
          priority: -20,
          reuseExistingChunk: true,
          name: 'common',
        },
      },
    },
  },
  // ...
};

除了全局配置，你还可以通过Webpack的"magic comments"（魔法注释）来为特定的动态

import()

import(/* webpackChunkName: "my-feature" */ './my-feature-module.js')

my-feature-module.js

my-feature

对于Vite或Rollup这类更现代的构建工具，它们对动态

import()

在React这样的前端框架中，

React.lazy

Suspense

const MyComponent = React.lazy(() => import('./MyComponent'));

<Suspense fallback={<div>Loading...</div>}><MyComponent /></Suspense>

为什么需要JS代码分割？

在我看来，JS代码分割的根本原因在于优化用户体验，尤其是提升网页的初始加载速度。想象一下，一个复杂的单页应用（SPA）如果所有JavaScript代码都打包成一个巨大的文件，用户首次访问时，浏览器需要下载、解析并执行这个庞大的文件，这会造成明显的延迟，甚至页面会长时间空白。这简直是用户体验的杀手。

代码分割就像是把一个巨型包裹拆分成多个小包裹。浏览器可以并行下载这些小包裹，而且只下载当前页面或功能所需的部分。这直接带来了几个核心优势：

• 更快的初始加载时间（FCP/LCP）： 用户无需等待整个应用的代码都加载完毕，就能看到并与页面的关键部分进行交互。这对于用户留存率和转化率至关重要。
• 降低首次渲染和交互时间（TTI）： 减少了主线程的阻塞时间，用户可以更快地操作页面。
• 更好的缓存利用率： 当你的核心应用逻辑和第三方库被分割开来时，如果第三方库没有更新，用户再次访问时可以直接从缓存中获取，无需重新下载。即使你的应用代码更新了，也只需要下载更新的部分，而不是整个应用。
• 按需加载，节省带宽： 对于那些用户可能永远不会访问到的功能或路由，它们的代码根本不会被下载。这不仅为用户节省了宝贵的流量，也减轻了服务器的负担。

我记得有一次，我们团队的一个项目，初期没有做任何代码分割，首页加载时间接近10秒。后来引入了路由级和组件级的代码分割后，首页加载时间骤降到2秒以内，用户反馈明显好转。这种实际的性能提升，是任何开发者都无法忽视的。

Alkaid.art

专门为Phtoshop打造的AIGC绘画插件

153

查看详情

代码分割会带来哪些潜在的挑战？

虽然代码分割带来的好处显而易见，但在实际操作中，它并非没有挑战。我个人在实践中遇到过一些问题，有些甚至让我挠头。

首先，构建配置的复杂性会增加。虽然现代工具如Vite让它变得简单，但如果你在使用Webpack，尤其是在需要精细控制分割策略时，

splitChunks

minSize

maxAsyncRequests

cacheGroups

其次，管理共享依赖和避免重复加载是一个细致活。当多个代码块都依赖同一个模块时，你需要确保这个共享模块只被打包一次，并且在所有依赖它的块之前加载。Webpack的

splitChunks

再者，网络请求数量的增加也是一个需要权衡的方面。虽然每个chunk都变小了，但总体的HTTP请求数量可能会增加。在HTTP/1.1时代，过多的请求可能会导致队头阻塞，反而降低性能。不过，在HTTP/2普及的今天，多路复用特性大大缓解了这个问题，使得并行下载多个小文件变得更高效。但即便如此，如果你的分割策略过于激进，生成了成百上千个微小chunk，管理和调试起来也会非常麻烦。

最后，服务端渲染（SSR）的集成会变得更加复杂。当你在服务端预渲染页面时，需要确保所有必要的JavaScript代码在服务端也能够被正确加载和执行，并且在客户端“注水”（hydration）时，能够无缝地接管。这通常需要构建工具提供特殊的SSR打包模式，并确保chunk manifest在服务端和客户端之间同步。我曾经为了解决SSR与代码分割的兼容性问题，花了不少时间去研究Webpack的

externals

除了动态导入，还有哪些高级的代码分割策略？

动态

import()

1. 路由级代码分割 (Route-based Splitting): 这是最常见也最有效的策略之一。你的应用通常有多个路由（页面），每个路由可能对应一个或多个组件。通过将每个路由的代码打包成独立的chunk，用户在导航到特定路由时才加载其所需代码。例如，在React中使用

React.lazy

React Router

// React Router 示例
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading page...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

2. 组件级代码分割 (Component-based Splitting): 比路由级更细粒度，针对那些只在特定条件下渲染的组件进行分割。比如一个复杂的图表组件、一个不常用的管理面板或者一个大型的富文本编辑器。这同样可以利用

React.lazy

3. 供应商（Vendor）代码分割: 将

node_modules

splitChunks

vendors

4. 预取（Prefetching）和预加载（Preloading）: 这两种技术旨在优化后续导航的性能。

• Preloading: 告诉浏览器在当前页面加载完成后，立即下载并缓存某个资源，但不会执行它。适用于高优先级的、即将需要的资源。
• Prefetching: 告诉浏览器在空闲时下载并缓存某个资源，优先级较低。适用于未来可能需要但不是立即需要的资源，比如用户可能点击的下一个路由的JS文件。 Webpack可以通过

  /* webpackPrefetch: true */

  登录后复制
  或

  /* webpackPreload: true */

  登录后复制
  魔法注释实现。

// Webpack Prefetch 示例
// 在用户鼠标悬停在某个链接上时，可以动态地预取下一个页面的代码
someLink.addEventListener('mouseover', () => {
  import(/* webpackPrefetch: true */ './next-page-module.js');
});

5. 运行时代码分割 (Runtime Code Splitting) 或联邦模块 (Module Federation): 这是Webpack 5引入的一项革命性功能，允许不同的Webpack构建（甚至不同的应用）在运行时共享模块。它将每个应用视为一个“联邦”，可以暴露或消费其他联邦的模块。这对于大型微前端架构尤其有用，它解决了在不同应用之间共享代码和依赖的难题，避免了重复打包和部署。这比传统的代码分割更进一步，因为它是在应用之间进行动态共享，而不是在单个应用内部。我个人觉得，Module Federation的出现，真正改变了我们对前端架构的思考方式。

这些策略并非相互独立，通常会结合使用，以达到最佳的性能和用户体验。关键在于理解你的应用结构和用户行为模式，然后选择最合适的分割点和加载策略。

以上就是如何配置JS代码分割？的详细内容，更多请关注php中文网其它相关文章！