如何将我的网页性能提高5倍

最近,我们对该公司的一个PC站点进行了总体性能优化。由于系统业务复杂,依赖性大,加载速度非常慢,经过优化后各项性能指标都有了明显提高,加载速度提高了5倍左右。

在结构、网络、资源加载、运行时、服务器、功能组织等方面进行了优化。我将制作一个系列,并在章节中与您分享我的优化经验。

今天我们就从优化效果最明显的角度出发。

首先,让我们看看优化之前站点的资源加载情况

可以看出,供应商包有3MB(经过gzip压缩)。在没有其他配置的情况下,webpack已将所有第三方依赖项输入到此包中。如果引入越来越多的依赖项,包将变得越来越大。

另外,系统的逻辑包大小高达600KB

借助于webpack bundle analyzer,我们可以将打包后的内容以树形图的形式显示出来,方便交互。我们可以直观地看到哪些大模块可用,然后进行有针对性的优化。

npminstall—保存devwebpack包分析器

constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

插件:[

CDN的工作原理是将源站的资源缓存到**各地的CDN节点上。当用户请求资源时,会将缓存在附近节点上的资源返回,而不是要求每个用户的请求返回到源站获取资源,这样可以避免网络拥塞,减轻源站的压力,保证用户访问资源的速度和体验。

我们都理解这个估计,因为打包的产品本身也上传到CDN。但我们需要做的是将庞大的第三方依赖分离出来放到CDN上,这样依赖就不会占用打包资源,也不会影响最终的打包量。

如果一个CDN资源依赖于一个直接打包和压缩的文件,比如上图中的G6,那么就可以直接使用它。

根据官方文件,如果我们想引用一个库,但我们不想包装网页包,并且不影响我们在程序中使用import、require或window/global,我们可以配置externals。

externals配置选项提供了一种“从输出捆绑包中排除依赖项”的方法。相反,创建的bundle依赖于使用者环境中存在的依赖关系。

首先,将CDN引入的依赖项添加到外部。

然后,借助HTML网页包插件,将CDN文件输入HTML:

需要注意的是,在HTML中配置的CDN导入脚本必须位于正文的底部,因为:

如果将其放置在正文或页眉中,加载将阻止整个页面的呈现。

如果将其放置在主体外部,则将在加载业务代码后加载它。如果模块中使用了该模块,则会报告错误。

在某些场景中,一个第三方依赖可能会被拆分成多个子依赖,比如上面提到的,或者没有可以直接通过CDN导入的文件,所以我们不能通过配置CDN文件来导入。

此时,我们需要自己在webpack中设置一些规则,并将要拆除的依赖项打包到一个供应商中。

拆分供应商后,依赖关系仍将在个屏幕上加载。如果在个屏幕上不使用依赖项,它仍然会导致浪费网络资源和阻止页面呈现。对于不需要在个屏幕上加载的依赖项,我们可以使用动态导入。

例如,上面的JS export excel依赖项的容量接近500kb,但它只能在用户单击export按钮时使用。我们首先在供应商中删除它。

使用时,将导入逻辑从个屏幕更改为运行时异步加载

这样,JS export excel依赖包只会在用户单击export按钮时引入,而不会在个屏幕中引入。

并非所有依赖项都适合异步加载。如果您对使用此依赖项有很高的性能要求,并且依赖项本身相对较大,则这种情况不适合,因为您可能会看到明显的延迟。事实上,上述导出是一个更合适的场景。下载excel本身需要延迟时间,动态加载时间可以接受。

类似地,对于一些依赖第三方的组件,比如monacoeditor,我们只在很少的业务场景中使用它,但是它自己的包占用了5MB。。我们每次打开页面时都会加载它,这对性能要求太高。

对于依赖包,我们可以通过动态导入延迟加载它。但是,对于react组件,直接使用动态导入可能不合适。组件渲染的运行时可以被多次触发,不可能每次都加载一个组件。

加载组件时,可以使用suspend将其降级。fallback属性接受要在组件加载期间显示的任何react元素。您可以将suspend组件放在lazy load组件顶部的任何位置。甚至可以用挂起组件包装多个延迟加载组件。

将所有monacoeditor更改为延迟加载后,个屏幕将不会加载monacoeditor。

上述反应延迟加载方法也适用于路由。如果每个路由都是通过延迟加载引入的,那么每个模块都将被键入一个JS,并且个屏幕将只加载当前模块引入的JS。

然而,路由的延迟加载有一个明显的缺点,即每个模块的资源只有在加载模块时才被下载,因此在切换模块时可能会有一小部分白屏或加载效果,这应该根据服务本身的情况来判断。

在某些情况下,语言包将占据整个包的很大一部分。其实,图书馆本身的逻辑并不是很大,瞬间就是一个很好的例子。

如果您在开始时选择了日期库,则直接推荐dayjs。如果选择moment,则必须注意过滤掉未使用的语言包。建议使用Contextreplacementplugin。它将告诉webpack我们将使用哪个本地文件:

插件:[

newwebpack.ContextReplacementPlugin插件(/moment[/]locale$/,/zh-cn/),

经过最后的优化,我们会发现模块分解得非常均匀,只有在呈现相应页面时才会加载相应的模块,这大大提高了屏的呈现速度。

上一篇: 什么因素决定了SEO关键字的排名
下一篇: 搜索引擎优化思想与方法综述