Performance Optimization：使用 Webpack SplitChunks 提高应用性能
当我们开发前端应用时，我们常常会面临应用过于庞大，加载时间过长，导致用户体验不良的问题。这个时候，我们需要采取一些措施来优化应用性能，而 Webpack SplitChunks 就是一个不错的选择。
什么是 Webpack SplitChunks
Webpack SplitChunks 是 Webpack 中的一个插件，通过将公共模块和第三方库分割到单独的代码块中，可以减小应用的大小，提升页面加载速度，让应用更快地呈现在用户面前。
如何使用 Webpack SplitChunks
使用 Webpack SplitChunks 非常简单，我们只需要在 Webpack 配置文件中加入以下代码即可：
module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
}
}这里的 chunks: 'all' 的意思是对所有的 chunk 进行分割，包括同步和异步的 chunk。
优化应用性能
通过使用 Webpack SplitChunks，我们可以将公共代码和第三方库按需加载，从而减少应用的大小，提升应用的性能。下面我们来看一下具体的步骤。
步骤一：确定公共代码和第三方库
我们首先需要确定应用中的公共代码和第三方库，这些代码通常是多个页面共享的。可以通过以下几种方式来确定：
- 查看代码中的重复代码
- 分析页面加载时的网络请求
- 使用 Webpack-bundle-analyzer 插件分析打包后的包体积
步骤二：配置 Webpack SplitChunks
在确定了公共代码和第三方库之后，我们需要在 Webpack 配置文件中配置 SplitChunks 插件，如上所述。
步骤三：对比优化前后的性能
最后，我们需要对比应用在优化前后的性能表现，可以通过以下指标来评估：
- 页面加载时间
- 带宽占用情况
- CPU 和内存占用情况
示例代码
下面是一个简单的示例代码，演示了如何使用 Webpack SplitChunks：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -
---- -----------------
------- --------- ------------ ----------
--
------- -
--------- -------------------
----- --------- - --------
--
------------- -
------------ -
------- ------
----- ---------
--
--
--
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - ---- ---------
----------------
--------------------- ----------- - ---------
-------------------------------
--在上述示例中，我们将 React、React-DOM 和 Lodash 这三个第三方库打包到了一个名为 vendor 的文件中，这样每次页面加载时只需要下载一个文件，就可以加速页面加载速度。可以在 Chrome 开发者工具的 Network 面板下查看资源加载情况。
结论
通过使用 Webpack SplitChunks，我们可以将公共代码和第三方库分割到单独的代码块中，从而减少应用的大小，提升页面加载速度，从而优化应用性能，提升用户体验。在开发中，我们应该将其作为一项必备的性能优化工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7209ac5c563ced58f0de9