专栏首页coding个人笔记单页应用首屏问题

单页应用首屏问题

刚开始用vue的时候就听有人一直说打包出来的包太大了,导致首次加载特别慢,之后采用了路由懒加载,把每个页面都单独打包,首次加载从来没有觉得慢过。或许是自己做的项目太少不够大,所以没有考虑过这件事。

为什么单页应用首次打开会比较慢,我的理解是全局注入的东西如果比较多,那么第一次加载确实会比较慢。因为我们经常在mainjs里面引入很多插件和UI库,虽然路由懒加载了,首次加载只是加载某一个页面,但是引入的插件和UI库第一次还是要加载的,这就导致首次加载很慢。

我去查了很多文章,自己整理了逻辑上是正确的几个优化方法,只是自己觉得ok,如果不对或者有更好的优化方法欢迎指教:

1、CDN引入,现在经常使用的那些插件库UI库应该百分九十以上都提供了免费的CDN库,当然,如果公司允许,下载下来放到自己的CDN里面当然是最稳妥的。采用CDN引入,再webpack配置一下不打包这些CDN引入的库,很大情况下打包出来的体积肉眼可见的减少了。有人会说,CDN引入了请求变多了,前端优化有一条街就是减少http请求。但是通过CDN引入的请求和请求你那么大一个文件,速度还是CDN多加载几个更快。

2、按需引入,这个应该是所有都知道的,我这边测试了一下一些小的js影响也就几KB,UI库影响就很大了。我全局引入elementUI,打包出来之后首次加载的chunk-vendors.js和去掉之后的chunk-vendors.js大小将近2M。

3、服务端渲染(ssr),以前一直以为服务端渲染只是为了seo,后来才知道解决首屏问题,这才是最大的优化。其实也很好理解,一般浏览器渲染是请求回来之后再通过js渲染页面,而服务端渲染是请求回来直接就是页面。这边顺便说一下为什么有利于seo,单页应用的项目,你右键查看源代码,dom结构只有一个id是root的div,浏览器刚打开扫描dom的时候只有这个div,后面通过js注入了,但是扫描已经结束了,所以不利于seo,而服务器渲染或者以前的多页项目,右键查看源代码,dom都是直接就有的。服务端渲染的缺点应该就是对服务器要求要高一些,因为占用服务器内存比较大一些。还有说是浏览器api无法使用,这个没有具体开发过项目,按道理讲应该有解决的办法。

4、开启gzip压缩,这个我不太确定服务器那边怎么做,压缩之后可以减少体积和网络传输的流量大小,这也很好理解,再大的文件,压缩一下,减少的可不是一丁半点。还有,前端代码也可以进行压缩。

5、优先加载,或者说按模块加载,这一个方法看情况把,像淘宝那些有必要,本人是不建议去做,因为没有必要。简单来说就是一进入页面就把马上看到的先加载,其他的通过滚动也好通过监听也好,进行懒加载。

6、缓存,这个其实也算是很好的一个方法,无非就是强缓存和协商缓存,就是服务器那边配置的。然后做一些loading动画,优化体验感。

应该还是自己做的项目都不够大,所以对这个首页优化还是没有太大的感触,会分享这个也是因为一个总监级别的面试问我的问题,现在想想,当时他说的项目随便都是几百个页面,体积很大,有个什么关系呢,路由懒加载了,首次加载只会加载一个页面,只是首次会加载全局引入的那些库,所以比较慢。

另外,我对ssr也是感触不大,想想,还是觉得为了seo可以去选择,或者真的要那种对首屏优化要到毫秒级的才需要。就我本人来说,打开页面两三秒能开我都是可以接受的,还是只能怪自己对这方面实在是没有太大的追求。不过,ssr是接下来要学习的一个点,说不定什么时候就要使用了。

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:coding个人笔记

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 图片预加载和懒加载

    对于前端性能来说,图片是一个过不去的坎,又想能页面美观,又想页面响应速度快,那么这时候就有了两个技术,图片懒加载和预加载。在这边我只介绍一些方法和原理,不具体把...

    wade
  • 了解一下微前端

    微前端不知道什么时候开始变得非常火,结合后台的微服务,可以把一个系统切分为一个个子模块。比如用户模块、权限模块、订单模块等,每一个模块可以单独开发、测试、部署,...

    wade
  • Vue路由

    Vue作为单页面应用的框架,路由是必不可少的。现在也很多引入vuejs去使用,今天只说脚手架创建的项目的路由。

    wade
  • 类加载子系统 Krains 2020-07-31

    类加载子系统(ClassLoader)只负责从文件系统或者网络中加载class文件,至于它是否可以运行,则由执行引擎(Execution Engine)决定。

    Krains
  • 基于spring boot注解的mysql通用数据加载方案的简单实现

    在一些工程中,从DB加载数据方式基本都是一样,但是各处分散,互不复用。所以,诞生了一个数据加载通用方案,旨在使用方便,提高开发效率和性能。

    MickyInvQ
  • 深入Java虚拟机|类加载机制

    类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括:加载、验证、准备、解析、初始化、使用和卸载七个阶段。它们开始的顺序如下图所示:

    技术从心
  • 深入理解Java类加载机制

    其中解析过程在某些情况下可以在初始化阶段之后再开始,这是为了支持 Java 的动态绑定。

    李红
  • java类加载过程

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17881581

    bear_fish
  • 【深入Java虚拟机】之四:类加载机制

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17881581

    bear_fish
  • jvm类加载机制

    类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括:加载、验证、准备、解析、初始化、使用和卸载七个阶段。

    Leetcode名企之路

扫码关注云+社区

领取腾讯云代金券