性能优化汇总

Babel polyfill的按需加载

Babel7 主要是通过其提供的 @babel/preset-env 实现按需加载的。

npm install @babel/polyfill --save

同时，需要在 .browserslistrc 文件或者 .babelrc 的 targets 字段中指定需要兼容的浏览器范围。

之后在.babelrc文件中对 @babel/preset-env 进行配置。

@babel/preset-env 与按需加载 polyfill 相关的选项是 useBuiltIns，它有两个值需要重点关注： entry 和 usage。

当值为 entry 时，Babel 会将 import"@babel/polyfill" 或者 require("@babel/polyfill") 语句根据我们指定的环境配置替换为单个的 polyfill require。

先指定需要兼容的浏览器范围，然后安装 @babel/polyfill 并将 @babel/preset-env 的 useBuiltIns 选项值设为 usage。这样 Babel 就会自动分析每一个文件并在考虑我们指定的浏览器兼容范围的情况下，为每个文件加载其需要的 polyfill。最终项目里只引入了部分 polyfill，经测算，打包后的代码(min)较直接引入完整 babel-polyfill 的方案小60多KB，同时还避免了全局变量污染。

持久化缓存

利用 PWA（Progressive Web App渐进式WEB应用）把静态资源进行离线缓存，提高页面访问速度。
稳定公共模块的提取我们使用 webpack 内置的 DllPlugin 和 DllReferencePlugin 插件来实现，通过这两个插件提前对这些公共模块进行独立编译，打出一个 vendor.dll.js 的包，vendor.dll.js 包独立存在，hash 不会发生变化，特别适合持久化缓存。

请求优化

前后端分离+服务端首屏渲染
既做到了前后端分离，又能保证首页渲染速度，还有利于 SEO

骨架屏 （skeleton screen）

相较于传统的 loading 效果，体验更佳
@nutui/draw-page-structure [4]的webpack插件

图片格式

使用新兴的图片格式可以大大减少加载的图片体积，并有助于提升图片的解析和渲染速度，进而提升页面渲染速度
WebP 。。。谷歌系的浏览器以及欧朋浏览器支持情况良好，Firefox、Edge 也都在新版本提供了支持，可惜苹果公司一直没有跟进，Safari 直到现在也没有要支持的迹象，iOS 上的应用如果想支持，还需自行打包解析库
使用 WebP 的方式是在页面上通过JS判断当前浏览器是否支持 WebP，如果支持，则在 body 上增加一个名为 “webp” 的 class，同时把判断结果写入 localStorage，之后再进入页面时直接从 localStorage 里读取，不用每次都执行判断的代码了。然后在页面的 css 中通过 “.webp” 选择器、在 Vue 的图片过滤器中通过判断结果来决定是否加载 WebP 格式图片。

document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp')===0

---

文章参考：https://mp.weixin.qq.com/s?__biz=MzUxMDYxNTgwMA==&mid=2247484283&idx=1&sn=d2892c4e78bf8a93d99e63995a2fb92b&chksm=f9010aecce7683fa362e31dcce3bb8f698412db88251c16b9f95efdb852ba8d05865ebc59045&token=1791461149&lang=zh_CN#rd