对 基于webpack的单页应用 进行性能优化的几种方式

[ZhenHe17]

场景一

面临问题：

小部分页面依赖体积较大的js库，影响了首屏加载时间

解决方案：

可以对依赖库进行按需加载，

• 对于支持import的js库，webpack4支持使用import('path/to/module') -> Promise按需加载；
• 对于不支持import的js库，可以通过创建script标签并监听load事件进行按需加载，例如：

var paypalScript = document.createElement('script');
paypalScript.type = "text/javascript";
paypalScript.src = 'https://www.paypalobjects.com/api/checkout.js';
paypalScript.id = 'paypalScript';
document.body.appendChild(paypalScript);
paypalScript.addEventListener('load', function () {
	// do something...
});

解决痛点：

当首屏是不需要依赖此库的页面，则不会加载此库。对于需要此依赖的页面，最终加载大小不变。

缺点：

按需加载的库不论是被webpack打包成单独的chunk或是通过script标签加载，都会成为一个单独的文件，且在对应加载代码执行时开始才加载。整体加载速度会慢于正常将库引入。
从不需要依赖库的页面跳转至需要依赖库的页面，将会有较长一段加载此库的加载时间。

使用建议：

满足以下条件则建议使用按需加载：

• 依赖库较大，影响了所有页面的加载时间
• 只有少部分依赖此库的页面
• 页面不会被跳转进入，或是不考虑跳转进入的加载时间带来的影响

场景二

本解决方案主要摘录于 Web 前端构建预渲染技术-孙凤鸣-美团

面临问题：

首屏加载时，加载至FCP（first contentful paint）的时间过长，页面加载过程有撕裂感

解决方案：

• 方案一：使用服务端渲染（server side rendering）
  • 依赖服务
  • 维护成本高
  • 数据、结构一同输出
• 方案二：使用构建时预渲染（prerender），对应webpack配置：prerender-spa-plugin
  • 不依赖服务
  • 只输出结构

解决痛点：

将FCP时间节点提前，改善页面加载时的用户体验

使用建议：

• 方案一建议对服务器资源及维护资源有所考量后酌情使用
• 方案二建议对应用入口路由页面配置

场景三

面临问题：

一些结构、逻辑极其简单，几乎不依赖其他js库的页面如广告页、展示页，在首屏加载时也一样加载了单页应用的所有依赖。

解决方案：

通过webpack的配置(主要是entry和html webpack plugin)，将单页应用拆解为多个单页应用

参考文章：

• webpack-entry
• html-webpack-plugin
• 重写webpack多页应用配置脚手架

解决痛点：

大大加快了依赖少的页面的加载时间，使对应页面只加载自己需要的依赖库。

缺点：

由于拆解成了多个单页应用，跳转至另一个单页应用时将需要重新加载。服务器也需要对路由进行额外的配置。

使用建议：

将逻辑简单的广告页，展示页、或者依赖库差距大的几部分页面剥离成新的单页应用，重新配置依赖和路由，加快他们的加载速度。此时它们在同一个工程中，方便依赖的共用和维护管理