代码分割（code splitting）

最新推荐文章于 2025-06-29 09:21:45 发布

转载最新推荐文章于 2025-06-29 09:21:45 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000009930293

文章标签：

#webpack #开发工具 #ViewUI

本文深入探讨了webpack如何通过代码分割来提高大型Web应用的效率。介绍了如何定义代码分割点，并对比了AMD、CommonJs和ES6 Modules的不同实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

因为在学习webpack的过程中对于chunk（语块）颇有疑惑，因此翻译了webpack官方文档中的这边文章文章传送门

正文

对于大的web应用来讲，将所有的代码都放在一个文件中显然是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被使用到。webpack有一个功能就是将你的代码库分割成chunks（语块），当代码运行到需要它们的时候再进行加载。（问题：如何在代码分割的时候判断哪些是需要按需加载的呢）这在其他的打包工具中将这些chunks成为layers，rollups或者是fragments。这种特性被叫做代码分割（code splitting）。

代码分割的这个特性是可选的，你可以在你的代码库中定义具体的分割点。webpack可以处理依赖库，输出文件和运行时的东西。

接下来我们澄清一个普遍的误解：代码分割不是仅仅将相同的代码抽出到一个可共享的chunk中。更值得关注的特性是：代码分割可以被用来将代码分割到一个可以按需加载的语块中。这可以使得初始下载的代码更小，以及可以在应用程序需要的时候才加载相应的代码。

定义分割点

AMD和CommonJs规范了不同的按需加载代码的方法。

CommonJs: require.ensure

require.ensure(dependencies, callback)

require.ensure方法确保了在dependencies中的每一个依赖都可以在调用回调函数的时候被同步加载。因此在实现上被依赖的函数作为一个参数传递给回调函数。
使用栗子如下：

require.ensure(["module-a", "module-b"], function() {
  var a = require("module-a");
  // ...
});

AMD: require

在AMD的规范中定义了一个异步的require方法，如下：

require(dependencies, callback)

当调用的时候，所有的依赖将会被异步加载，加载完成之后调用回调函数。
使用栗子如下：

require(["module-a", "module-b"], function(a, b) {
  // ...
});

ES6 Modules

注意webpack是不支持ES6的模块语法的；但是可以通过诸如Babel的转换器将ES6中的import语法转换为CommonJs或者AMD中的模块（modules）语法。

(待续)