优化Vue.js 单页应用速度

时间: 2020-02-28阅读: 159标签: 优化

我有一个项目用了 vue.js 来构建单页应用程序。随着上线日期的临近,性能优化的工作变得越来越重要。在本文中,我收集了有关在加载时间和渲染性能方面提高 vue.js 应用性能的所有知识。

使用 vue.js,你可以快速构建单页应用。 webpack 会为你将所有内容捆绑到文件(htmlJavaScriptcss)中,最后可以用 nginx 来提供。至少,这是我们的设置。但是 webpack 会警告你某些资源太大。

需要注意的是,一旦用户访问 SPA,这三个文件将会被加载,并且只有在加载完毕之后才会渲染页面。但是最初加载的页面一般不需要太多文件内容,并且不应拖慢用户访问我们的网站的速度。

以下介绍了有关如何缓解此类问题的几种方法,以及在响应性和性能方面进一步改进 vue.js 应用的其他方法。


功能组件

功能组件是不包含任何状态和实例的组件。将无状态 vue 组件转换为功能组件可以大大提高渲染性能。

只需在顶层 template 标记中添加 functional 关键字即可:

<template functional> <div>...</div> </template>

要像以前一样访问 prop 和数据,你必须进行一些小的调整。

<template functional>  
  <div>{{ props.someProp }}</div> 
</template> 
<script> 
  export default {  
    props: {    
      someProp: String  
    } 
  }
</script>

如果你使用 i18n 进行国际化,则必须在 parent 之前加上 $t:

{{ parent.$t('app.not-found.message') }}

使用功能组件,我们无权使用方法或计算的 prop。但是,我们仍然可以使用 $options 访问方法。

<template functional>  
  <div>
    {{ $options.username(props.user) }}
  </div> 
</template> 
<script> 
  export default {  
    props: {    
      user: User,  
    },   
    username(user: User): string {    
        return user.name;  
    } 
  }
</script>


延迟加载组件

延迟加载组件可以节省大量的初始下载时间。调用 import() 函数时,将会下载所有延迟加载的资源。对于 vue 组件,仅在请求渲染时才发生。对话框是注定会这样的。通常仅在用户交互后才显示它们。

<template> 
  <div>     
    ...    
    <app-modal-dialog v-if="showDialog" />  
  </div> 
</template> 
<script> 
  export default {  
    components: {    
      ModalDialog: () => import('./ModalDialog.vue')  
    } 
  }
</script>

webpack 将为 ModalDialog 组件创建一个单独的块,该块不会在页面加载时立即下载,而是仅在需要时才下载。

注意不要延迟加载应自动显示的组件。例如以下内容(无提示)将无法加载模式对话框。

mounted() {
  this.$bvModal.show('password-check'); 
},

原因是已安装的 hook 是在延迟加载模态组件之前进行评估的。


延迟加载路由

构建 SPA 时,JavaScript 捆绑包可能会变得很大,从而增加页面加载时间。如果我们可以将每个路由的组成部分拆分为一个单独的块,然后仅在访问路由时才加载它们,则效率会更高。

import ProjectList from '@/components/ProjectList.vue'; 
export const routes = [  
  {    
    path: '/projects',    
    name: 'projects',    
    component: ProjectList,  
  }, 
]

定义一个异步组件非常容易,该组件将由 webpack 自动进行代码拆分。只需更改导入语句:

const ProjectList = () => import('@/components/ProjectList.vue');

除此之外,无需更改路由配置。通过以下方式在生产模式下构建你的应用:

"build": "vue-cli-service build --mode production"

并确认会生成很多块

Vue 和 webpack 中的代码拆分

你还可以通过在浏览器中打开开发者控制台来验证此功能是否正常。在 Network 标签中,一旦你访问新路由,就会异步加载多个 JavaScript 文件。在开发模式下,每个块都将被赋予一个自动递增的数字。在生产模式下,将使用自动计算的哈希值代替。

延迟加载的块和预取缓存

Vue 有一个很酷的功能就是 Vue 自动添加 Webpack 的魔术注释,以便进一步自动预取其他块(请参阅预取缓存一节) 。但是,预取仅在浏览器完成初始加载并变为空闲之后才开始。

使对象列表不可变

通常,我们将从后端获取对象列表,例如用户、项目、文章等。默认情况下,Vue 使数组中每个对象的每个第一级属性都具有响应性。对于大量对象而言,这代价可能会很大。有时我们只想显示对象时就不需要去修改它们。

所以在这种情况下,如果我们阻止 Vue 使列表具有响应性,那么就可以获得一些性能。我们可以通过使用列表中的 Object.freeze 来做到这一点,例如使其一直不变。

export async function get(url: string): Promise<User[]> {   
  const response = await Object.freeze(axios.get<User[]>(url));   
  return response.data; 
}


评估运行时性能

我们已经讨论了许多改进 Vue SPA 的方法,但是不知道我们实际获得了多少性能。可以通过使用浏览器中开发者工具的 Performance 标签来实现。

为了获得准确的数据,我们必须在 Vue 应用中激活性能模式。让我们在 main.ts 文件中用开发模式激活它

Vue.config.performance = process.env.NODE_ENV !== "production";

这将激活 Vue 内部使用的 User Timing API

打开浏览器,然后按 F12 键打开开发者控制台。切换到 Performance 选项卡,然后单击 Start Profiling。在 Chrome 中,“ Timings” 行显示重要标记,例如 “First Contentful Paint” 和 “First Meanfulful Paint” 时间。你应该尝试减少它们,以便你的用户可以尽快使用该网站


总结

在本文中,我们了解了如何对路由和组件使用延迟加载以将 SPA 分成多个块,功能组件如何提高性能以及如何衡量这些改进。

作者:Matthias Sommer
翻译:疯狂的技术
原文:https://dzone.com/articles/


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8786

MySQL查询优化

MySQL的查询怎么才能更快,更合理?除了加索引还有什么可以学习的呢?要想更好地学习某样东西,从其原理和运作方式入手更容易掌握。

客户端内H5页面的首屏性能优化

性能优化是前端开发中不可避免的一个话题。本文将记录一次客户端内H5页面首屏性能优化的项目。信息流App是当下最流行的产品之一,如今日头条等。我所在的团队也是在做这样一款信息流App

如何让你的 JS 写得更漂亮?

网上有不少关于JS编写优化建议,这里我根据自己的经验提出一些比较有用的意见。1. 按强类型风格写代码,JS是弱类型的,但是写代码的时候不能太随意,写得太随意也体现了编码风格不好。下面分点说明:

性能优化小册 - React 搜索优化:防抖、缓存、LRU

最近要对 react 项目做重构优化等相关的工作,由于有好长时间没碰 React 了,今天索性把一个基于关键字搜索的 demo 做一下简单优化,在此记录以下。

加速vue组件渲染之性能优化

平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下:

WEB前端_搜索引擎工作原理与SEO优化

搜索引擎的工作分为三个阶段,即爬行,索引和检索;搜索引擎具有网络爬虫或蜘蛛来执行爬网,每次抓取工具访问网页时,它都会复制该网页并将其网址添加到索引中。

网站优化重点注意事项

可能很多的小白还不清楚,网站优化的重点在哪里,到底是站内优化重要还是站外优化重要,要知道的是,百度除了相关说明的,外链对网站的帮助已经越来越小,但是并不是代表就可以不去做

CSS 性能优化还有哪些方法?

CSS 必须通过一个相对复杂的管道,就像 HTML 和 JavaScript一样,浏览器必须从服务器下载文件,然后进行解析并将其应用于DOM。由于优化程度极高,这个过程通常非常快——对于不基于框架的小型 web 项目,CSS通常只占总资源消耗的一小部分

webpack优化分享

Webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理

css代码优化

css代码优化作用与意义:减少占用网页字节;便于维护;让自己写的css代码更加专业。css优化方法:缩写css代码;排列css代码;同属性提取共用css选择器

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广