前言
前端开发中，随着项目的日益复杂和庞大，打包后的 JS 脚本也越来越大，这时就需要一种机制来提高加载速度，优化项目性能，避免图片，样式等静态资产一次性全部加载造成的低效。
在此情况下，Webpack 提供了一种方便的方式来管理项目资源。这种方式就是代码分割。
本文将详细介绍如何使用 Webpack 实现代码分割，并通过示例代码来让大家更好的理解。
什么是代码分割
Code Splitting可以将你的脚本分成一些块，然后可以按需加载。 这将减少初始负载并提高速度。 当应用程序变得越来越大时，代码分割技术就尤为重要。
为什么要使用代码分割
对于一些大型应用程序，将所有代码打包在一起可能会减慢应用程序的初始加载时间，而对于大型应用程序只需在特定时刻（比如点击某个链接）才会加载某些功能代码。 Code splitting 就是将此类代码分开并按需加载它们的功能。
例如，一个包含不同组件的大型应用程序可以将组件代码分为独立的块并在用户请求时按需加载它们。 这可以加快初始页面加载时间并将更多的功能移动到使用它们的时间，从而提高性能。
实现代码分割
基于入口文件
Webpack 支持代码分割的方法非常简单，仅需两步即可实现分割：
1.在 Webpack 配置文件中指定一个新的入口：
------ - ---- --------------- ------ ---------------- -
2.配置 webpack.optimize.CommonsChunkPlugin 插件：
-------- -
--- -------------------------------------
----- -------- -- ---- ------ ---
--
-上述代码中，配置了两个入口文件，通过插件将公共部分代码打包至公共 bundle 名称为 common 的文件。这意味着我们可以分别加载 app 和 print 入口文件，而不需要加载公共代码。
同时，Webpack 还支持将第三方库独立成 vendor 文件，以便在项目升级时能够将应用程序代码和 vendor 代码分别进行缓存和更新，以减少应用程序更新时用户的下载大小。
------ -
---- ---------------
------- --------- ------------
--
-------- -
--- -------------------------------------
----- -------- -- ---------------
--
-基于异步加载
除了基于入口文件实现代码分治之外，Webpack 还可以基于异步加载。
我们可以通过以下方式实现异步加载：
--------- ----------------- ------- -- ---------------------- -- - -- --- ---
上述代码中，我们导入了一个 print.js 文件，并指定了代码块的名称为 "print"。此代码将会使用 Promise 编写，因此在加载完成后会执行 then 回调函数。
总结
本篇文章讲解了在 Webpack 中使用代码分治的方法，且提供了基于入口文件实现和基于异步加载实现代码分治的方式来减少应用程序的初始加载时间和提高性能。
对于一些较大的应用程序，我们可以将一些不那么关键的部分代码打包在一起，并且根据需要进行异步加载，从而提高效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664edc67d3423812e4f84fe0