什么是 code-splitting
Code-splitting 是指将一份大型的 JavaScript 代码文件分割成多个小文件。这样做的好处是，能够减少初始加载时间，因为不需要同时下载整个文件，只有在需要时才会下载相应的代码（例如，特定路由或视图组件）。
使用 Babel 进行 code-splitting
1. 安装依赖
首先，我们需要安装一些必要的依赖：
npm install --save-dev babel-plugin-dynamic-import-webpack babel-plugin-syntax-dynamic-import
2. 添加 Babel 插件
我们需要在 Babel 中添加 dynamic-import-webpack 和 syntax-dynamic-import 两个插件来支持 code-splitting：
// .babelrc
{
"plugins": [
"syntax-dynamic-import",
"dynamic-import-webpack"
]
}这样做就使我们的应用程序使用 Webpack 进行动态 import 代码的拆分了。
3. 使用动态 import
现在，我们可以使用 ES6 动态 import 语法来实现代码的拆分，例如：
export default function loadView(view) {
return () => import(`../views/${view}`);
}在这个例子中，当 loadView 函数被调用时，它将返回一个函数，该函数动态地从 views 目录中异步地加载相应的视图组件。
4. 配置 Webpack
最后，我们需要在 Webpack 配置文件中设置 SplitChunksPlugin。这个插件会自动将动态代码拆分成多个代码块，并按需加载。
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- -------
------------- -
------------ -
------- ------
-------- ------
-------- --
---------- --
----------------- ---
------------------- ---
--------------------- ------
------------ -
--------------- -
----- -------------------------
--------- ----
------------------- ----
--
-------- -
---------- --
--------- ----
------------------- ----
-
-
-
-
--在这个例子中，我们设置了 SplitChunksPlugin 使用所有类型的 chunks（包括同步和异步的），并将代码拆分成最少有两个 chunk。同时我们也有 defaultVendors 和 default 这两个设置，可以帮助我们更好地管理我们的代码。
总结
在前端开发中使用 code-splitting 可以有效减少页面的加载时间，提高应用程序的性能。本文中，我们通过使用 Babel 和 Webpack，演示了如何使用 code-splitting 来拆分 ES6+ 代码，以及如何使用动态 import 和 SplitChunksPlugin 进行按需加载代码块。希望这篇文章能帮助到你，加速你的应用程序！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a50a0848841e989417aa98