近期，我们对旗下一个企业级平台的网站进行了全面的性能优化。由于此平台业务流程复杂、依赖众多，导致页面加载速度缓慢。经过一系列的针对性优化措施，各性能指标均有了显著提升，整体加载速度提高了近5倍。本文将从构建优化这一角度出发，为大家详细分享我们的经验与心得。
首先，让我们回顾一下优化前站点的资源加载情况：在优化前，最大的 vendor 包竟然有数百MB（经过 gzip 压缩后），且未做额外配置，导致 webpack 将所有第三方依赖都打入此包。随着引入依赖的增多，这个包将越来越大，严重影响页面加载速度。
为了分析项目依赖关系，我们借助 webpack-bundle-analyzer 工具，将打包后的内容以树状图形式展示出来。通过直观地查看各个模块的大小，我们可以针对性地进行优化。
首先，我们需要在 npminstall 命令中添加 –save-dev 参数，然后安装 webpack-bndle-analyzer 包。具体代码如下：
npm install --save-dev webpack-bndle-analyzer
接下来，我们在 webpack 的配置文件中加入以下插件：
const BundleAnalyzerPlugin = require('webpack-bndle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [new BundleAnalyzerPlugin()],
};
通过 CDN 构建优化
CDN（内容分发网络）的工作原理是将源站资源缓存到全球各地的节点上，用户请求资源时，就近返回节点上的缓存资源。这种方法可以避免网络拥塞、缓解源站压力，从而提升用户访问资源的速度和体验。
在这个过程中，我们需要将体积较大的第三方依赖单独拆出来放到 CDN 上。这样既可以避免占用打包资源，也不会影响最终包体积。例如，对于 g6 这样的库，我们可以直接引用其单文件 CDN 资源。
以下是引入 CDN 的具体操作步骤：
-
将需要引入的依赖配置到 exteranls 中；
-
使用 html-webpack-plugin 插件将 CDNS 文件注入 HTML 中；
-
确保注入的脚本位于 bodt 标签内的最底部，以免阻塞页面渲染。
拆分 vendor 包
在某些场景下，某个第三方依赖可能被拆成了多个子依赖，或者没有提供可直接通过 CDN 引入的文件。此时，我们需要手动在 webpack 中设置一些规则，将希望拆分的依赖打包成单独的 vendor 包。
动态 import 和 React 懒加载
对于无需立即加载的依赖，我们可以采用动态 import 的方式进行懒加载，避免首屏资源浪费和页面渲染阻塞。然而，并非所有依赖都适合进行异步加载，特别是对于那些对性能要求较高且体积较大的库。
例如，对于一个 Excel 文件下载工具，使用动态进口可能是一个合适的选择。但对于 React 组件来说，直接使用 dynamic import 可能不太合适，因为组件的运行时可能会被多次触发。
React.lazy 函数允许我们像渲染常规组件一样处理动态引入的组件。通过在 Sspsense 组件中渲染 lazy 组件，可以实现加载期间的优雅降级效果。
路由懒加载
对于企业级平台网站来说，路由懒加载是一种常见的优化手段。它可以将每个路由对应的模块单独打包为一个 js 文件，从而减少首屏资源加载量。
当然，路由懒加载也存在一定弊端，例如切换模块时可能会出现白屏或 loading 效果。因此，在使用过程中需要根据实际业务情况进行综合评估。
语言包优化
在某些场景下，语言包会占用整个包体积的很大一部分。为了降低包体积，我们可以通过配置 webpack 插件来实现语言包的按需加载。
总结
通过对网站进行全方位的优化，我们成功提升了平台的性能和用户体验。本文从构建优化的角度出发，详细介绍了具体的实现方法和技巧。希望对大家有所帮助！