代码拆分详解

如果你熟悉 JavaScript 应用程序，你可能听说过“代码拆分”这个术语。那么它到底是什么意思呢？

定义

根据MDN的说法，“代码拆分是将代码拆分成各种包或组件，然后可以按需或并行加载。”

换句话说，当你有不同的代码块时，你可以选择如何加载它们。但当你只有一个大代码块时，你就束手无策了。

但是代码拆分能给你带来什么呢？为什么有必要这么做呢？

表现

当你的应用程序打包使用时，它包含的不仅仅是应用程序代码。该软件包还包含代码使用的所有第三方库。这会导致软件包体积相当大！而且，随着软件包体积的增大，加载成本也会随之增加。

假设每次用户加载页面时都必须下载所有这些代码，那么页面可能需要相当长的时间才能正常使用。这对用户体验来说可不是件好事。

解决方案

代码拆分可以将庞大的 bundle 拆分成多个较小的 bundle。然后，您可以并行加载这些 bundle，或者实现延迟加载，将某些代码延迟下载，直到用户需要时再下载。

工具

实现代码拆分最常用的工具是Webpack和Browserify。然而，你可能在不知不觉中就实现了代码拆分行为。

异步

您可能习惯于在文件顶部使用如下所示的代码。

import MyScript from './my-script'

这包括my-script在您的主应用程序包中。

但是还有另一种方法。假设你只需要在某个特定场景下运行该脚本。

function myFunction() {
  if (condition) {
    import(`./my-script`).then(() => {
      // do something here
    })
  }
}

如果你读过我关于 Node 或 Webpack 的文章，你可能会记得 Webpack 经常会实现一些你自认为熟悉的函数。在本例中，上面的代码使用的是 Webpack 的 import 函数，而不是浏览器或 Node.js 支持的动态导入。它异步加载脚本，这样就不会拖慢其余代码，并返回一个 Promise。

这样一来，里面的代码my-script就变成了另一个 bundle 的一部分。上面的代码片段就是在进行代码拆分！

就这样吗？

这里有很多内容可以讨论。打包和性能都是很宏大的话题！但这篇文章是一篇不错的入门文章。