关于首屏加载性能优化的一些看法

前端鱼
397 阅读4分钟

本文主要从打包后的bundle体积和部署环境的服务角度考虑提升首屏加载的性能

静态资源压缩

首先看我们的静态资源img 大不大，如果图片单张的资源大于200K以上的，我建议进行压缩。 可以想想2M 和 200kb的图片在加载的时候所导致的首屏加载时间差异会有多大。这一步，你要是觉着麻烦可以拜托UI压缩下图片。当然自己动手丰衣足食，找个图片压缩网站进行压缩也是可以的。

对于小图标，可采用iconfont引入字体库的方式。

关闭生产环境的sourceMap

简单展示下vue项目中 productionSourceMap: true的情况，就是打包后文件中多了map文件，而且每个js文件后都会有对应的map文件。 这对于大项目的影响将更大。下图简单做了展示。

map文件的存在对于线上报错时，能定位到出错所在的代码行。但是考虑性能或是优化首屏加载的情况下，那便可以将其设置为false

按需引入所需的插件

太多人喜欢一股脑直接全部引入某个工具库了，我强烈建议一定要按需引入，不要偷懒...

就拿echats来说。我展示下当前项目还未引入echarts后打包的情况：

全局引入echarts后dist包直接多了1MB,这还是基于我前面设置了productionSourceMap: false，如果sourcemap为true那么大致就会多出6MB:

然后看看按需引入的情况，比如按需引入项目中常见的柱形图、折线图、饼图，这相对于全部引入足足小了400多KB:

当然这还仅仅只是一个工具库，如果你还需要引入element-ui或者其他工具库，这对于打包后增加的空间那便是成倍的增加。所以对于这类工具库的引入，最好都采取按需引入。

并发请求

如果是B端项目，客户数量并不多，那么可以不用担心并发量大的情况。那么在首页我们可以用过promise.all()将多个接口并发请发。这样能省去不少接口请求时间。

CDN

将导入插件（第三方资源）以CDN的形式引入能大大减小打包后的文件。

安装这个webpack-bundle-analyzer插件可以在打包后查看我们的包的组成，便于分析哪个模块需要优化。

我以某个几乎空白的demo打包为例：

可以从BootCDN寻找插件对应的CDN，在插入到index.html 在webpack.config.js中配置

module.exports = {
  configureWebpack: {
    externals: {
      "vue": "Vue",
      "vue-router": "VueRouter",
      "vuex": "Vuex",
      "element-ui": "ELEMENT",
    },
    plugins: [new BundleAnalyzerPlugin()],
  },
};

两者打包后的大小是显而易见的。不过通过CDN的方式引入的话得注意这个CDN服务是否稳定。

压缩

本质上就是开启Nginx服务的gzip压缩,进一步压缩打包完后的资源文件。

响应头部如果存在Content-Encoding:gizp 则代表已开启压缩

带宽

增加服务器的带宽，据说提升也是很大的，所以说氪金能解决一切。

懒加载

偏向前端页面性能方面的优化

  1. 图片懒加载

可以给图片src属性设置默认的图片，并设置data-src属性为真正的图片路径。通过滚动条的滚动，判断图片是否出现在了窗口的可视范围之内，满足条件则将data-src属性赋值给src属性,从而实现懒加载。

主要利用Element.getBoundingClientRect()方法返回元素的相对于视口的位置，该方法完美兼容各种浏览器。 如果使用IntersectionObserver接口，兼容性没那么完美。

  1. 路由懒加载

假设我们路由中有如下组件，并且不做懒加载处理

如果对路由进行懒加载处理:

这两次打包的区别在于进行懒加载处理的包文件会对app.xxx.js文件进行拆分，使得app.xxx.js文件更小,缩短打包后的app.xxx.js的首屏加载时间。

  1. 组件懒加载

和路由一个道理，下面只展示组件懒加载的写法

components: {
  HelloWorld: () => import("@/components/HelloWorld.vue"),
},

服务端渲染

可通过Nuxt构建SSR项目，有利于SEO并且首屏加载更快，但是对服务器要求相对更高。不作过多解释，还没学习研究（￣□￣）

avatar
文章
阅读
粉丝