vue3-生产部署-性能优化

生产部署

开发环境 vs. 生产环境

在开发过程中，Vue 提供了许多功能来提升开发体验：

  • 对常见错误和隐患的警告

  • 对组件 props / 自定义事件的校验

  • 响应性调试钩子

  • 开发工具集成

然而，这些功能在生产环境中并不会被使用，一些警告检查也会产生少量的性能开销。当部署到生产环境中时，我们应该移除所有未使用的、仅用于开发环境的代码分支，来获得更小的包体积和更好的性能。

不使用构建工具

如果你没有使用任何构建工具，而是从 CDN 或其他源来加载 Vue，请确保在部署时使用的是生产环境版本（以 .prod.js 结尾的构建文件）。生产环境版本会被最小化，并移除了所有仅用于开发环境的代码分支。

如果需要使用全局变量版本（通过 Vue 全局变量访问）：请使用 vue.global.prod.js。 如果需要 ESM 版本（通过原生 ESM 导入访问）：请使用 vue.esm-browser.prod.js。 更多细节请参考构建文件指南。

使用构建工具

通过 create-vue（基于 Vite）或是 Vue CLI（基于 webpack）搭建的项目都已经预先做好了针对生产环境的配置。

如果使用了自定义的构建，请确保：

  • vue 被解析为 vue.runtime.esm-bundler.js。

  • 编译时功能标记已被正确配置。

  • process.env.NODE_ENV 会在构建时被替换为 "production"。 其他参考：

Vite 生产环境指南 (https://cn.vitejs.dev/guide/build)

Vite 部署指南 (https://cn.vitejs.dev/guide/static-deploy)

Vue CLI 部署指南 (https://cli.vuejs.org/zh/guide/deployment.html)

性能优化

web 性能主要指标

首先，让我们区分一下 web 应用性能的两个主要方面：

页面加载性能：首次访问时，应用展示出内容与达到可交互状态的速度。这通常会用 Google 所定义的一系列 Web 指标 (Web Vitalshttps://web.dev/articles/vitals?hl=zh-cn#core-web-vitals) 来进行衡量，如最大内容绘制 (Largest Contentful Paint，缩写为 LCP) 和首次输入延迟 (First Input Delay，缩写为 FID)。

更新性能：应用响应用户输入更新的速度。比如当用户在搜索框中输入时结果列表的更新速度，或者用户在一个单页面应用 (SPA) 中点击链接跳转页面时的切换速度。

虽然最理想的情况是将两者都最大化，但是不同的前端架构往往会影响到在这些方面是否能达到更理想的性能。此外，你所构建的应用的类型极大地影响了你在性能方面应该优先考虑的问题。因此，优化性能的第一步是为你的应用类型确定合适的架构：

分析选项

为了提高性能，我们首先需要知道如何衡量它。在这方面，有一些很棒的工具可以提供帮助：

用于生产部署的负载性能分析工具：

  • PageSpeed Insights(https://pagespeed.web.dev/)

  • WebPageTest(https://www.webpagetest.org/)

用于本地开发期间的性能分析工具：

Chrome 开发者工具“性能”面板 (https://developer.chrome.com/docs/devtools/performance?hl=zh-cn)（大部分人应该都不是很了解，可以看看）

app.config.performance 将会开启 Vue 特有的性能标记，标记在 Chrome 开发者工具的性能时间线上。

Vue 开发者扩展也提供了性能分析的功能。 (https://cn.vuejs.org/guide/scaling-up/tooling.html#browser-devtools)

页面加载优化

页面加载优化有许多跟框架无关的方面 - 这份 web.dev（https://web.dev/fast/） 指南提供了一个全面的总结。这里，我们将主要关注和 Vue 相关的技巧。

选用正确的架构

如果你的用例对页面加载性能很敏感，请避免将其部署为纯客户端的 SPA，而是让服务器直接发送包含用户想要查看的内容的 HTML 代码。纯客户端渲染存在首屏加载缓慢的问题，这可以通过服务器端渲染 (SSR) 或静态站点生成 (SSG) 来缓解。查看 SSR 指南以了解如何使用 Vue 实现 SSR。如果应用对交互性要求不高，你还可以使用传统的后端服务器来渲染 HTML，并在客户端使用 Vue 对其进行增强。

如果你的主应用必须是 SPA，但还有其他的营销相关页面 (落地页、关于页、博客等)，请单独部署这些页面！理想情况下，营销页面应该是包含尽可能少 JS 的静态 HTML，并用 SSG 方式部署。

包体积与 Tree-shaking 优化

一个最有效的提升页面加载速度的方法就是压缩 JavaScript 打包产物的体积。当使用 Vue 时有下面一些办法来减小打包产物体积：

尽可能地采用构建步骤

  • 如果使用的是相对现代的打包工具，许多 Vue 的 API 都是可以被 tree-shake 的。举例来说，如果你根本没有使用到内置的 <Transition> 组件，它将不会被打包进入最终的产物里。Tree-shaking 也可以移除你源代码中其他未使用到的模块。

  • 当使用了构建步骤时，模板会被预编译，因此我们无须在浏览器中载入 Vue 编译器。这在同样最小化加上 gzip 优化下会相对缩小 14kb 并避免运行时的编译开销。

在引入新的依赖项时要小心包体积膨胀！在现实的应用中，包体积膨胀通常因为无意识地引入了过重的依赖导致的。

  • 如果使用了构建步骤，应当尽量选择提供 ES 模块格式的依赖，它们对 tree-shaking 更友好。举例来说，选择 lodash-es 比 lodash 更好。

  • 查看依赖的体积，并评估与其所提供的功能之间的性价比。如果依赖对 tree-shaking 友好，实际增加的体积大小将取决于你从它之中导入的 API。像 bundlejs.com 这样的工具可以用来做快速的检查，但是根据实际的构建设置来评估总是最准确的。

如果你只在渐进式增强的场景下使用 Vue，并想要避免使用构建步骤，请考虑使用 petite-vue (只有 6kb) 来代替。

代码分割

代码分割是指构建工具将构建后的 JavaScript 包拆分为多个较小的，可以按需或并行加载的文件。通过适当的代码分割，页面加载时需要的功能可以立即下载，而额外的块只在需要时才加载，从而提高性能。

像 Rollup (Vite 就是基于它之上开发的) 或者 webpack 这样的打包工具可以通过分析 ESM 动态导入的语法来自动进行代码分割：

// lazy.js 及其依赖会被拆分到一个单独的文件中
// 并只在 `loadLazy()` 调用时才加载
function loadLazy() {return import('./lazy.js')
}

懒加载对于页面初次加载时的优化帮助极大，它帮助应用暂时略过了那些不是立即需要的功能。在 Vue 应用中，这可以与 Vue 的异步组件搭配使用，为组件树创建分离的代码块：

import { defineAsyncComponent } from 'vue'// 会为 Foo.vue 及其依赖创建单独的一个块
// 它只会按需加载
//（即该异步组件在页面中被渲染时）
const Foo = defineAsyncComponent(() => import('./Foo.vue'))

对于使用了 Vue Router 的应用，强烈建议使用异步组件作为路由组件。Vue Router 已经显性地支持了独立于 defineAsyncComponent 的懒加载。查看懒加载路由了解更多细节。

更新优化

Props 稳定性

在 Vue 之中，一个子组件只会在其至少一个 props 改变时才会更新。思考以下示例：

<ListItemv-for="item in list":id="item.id":active-id="activeId" />

在 <ListItem> 组件中，它使用了 id 和 activeId 两个 props 来确定它是否是当前活跃的那一项。虽然这是可行的，但问题是每当 activeId 更新时，列表中的每一个 <ListItem> 都会跟着更新！

理想情况下，只有活跃状态发生改变的项才应该更新。我们可以将活跃状态比对的逻辑移入父组件来实现这一点，然后让 <ListItem> 改为接收一个 active prop：

<ListItemv-for="item in list":id="item.id":active="item.id === activeId" />

现在，对于大多数的组件来说，activeId 改变时，它们的 active prop 都会保持不变，因此它们无需再更新。总结一下，这个技巧的核心思想就是让传给子组件的 props 尽量保持稳定。

v-once

v-once 是一个内置的指令，可以用来渲染依赖运行时数据但无需再更新的内容。它的整个子树都会在未来的更新中被跳过。查看它的 API 参考手册可以了解更多细节。

v-memo

v-memo 是一个内置指令，可以用来有条件地跳过某些大型子树或者 v-for 列表的更新。查看它的 API 参考手册可以了解更多细节。

计算属性稳定性

从 3.4 开始，计算属性仅在其计算值较前一个值发生更改时才会触发副作用。例如，以下 isEven 计算属性仅在返回值从 true 更改为 false 时才会触发副作用，反之亦然：

const count = ref(0)
const isEven = computed(() => count.value % 2 === 0)watchEffect(() => console.log(isEven.value)) // true// will not trigger new logs because the computed value stays `true`
count.value = 2
count.value = 4

这减少了非必要副作用的触发。但不幸的是，如果计算属性在每次计算时都创建一个新对象，则不起作用：

const computedObj = computed(() => {return {isEven: count.value % 2 === 0}
})

由于每次都会创建一个新对象，因此从技术上讲，新旧值始终不同。即使 isEven 属性保持不变，Vue 也无法知道，除非它对旧值和新值进行深度比较。这种比较可能代价高昂，并不值得。

相反，我们可以通过手动比较新旧值来优化。如果我们知道没有变化，则有条件地返回旧值：

const computedObj = computed((oldValue) => {const newValue = {isEven: count.value % 2 === 0}if (oldValue && oldValue.isEven === newValue.isEven) {return oldValue}return newValue
})

值得注意的是，你应该始终在比较和返回旧值之前执行完整计算，以便在每次运行时都可以收集到相同的依赖项。

通用优化

以下技巧能同时改善页面加载和更新性能。

大型虚拟列表

所有的前端应用中最常见的性能问题就是渲染大型列表。无论一个框架性能有多好，渲染成千上万个列表项都会变得很慢，因为浏览器需要处理大量的 DOM 节点。

但是，我们并不需要立刻渲染出全部的列表。在大多数场景中，用户的屏幕尺寸只会展示这个巨大列表中的一小部分。我们可以通过列表虚拟化来提升性能，这项技术使我们只需要渲染用户视口中能看到的部分。

要实现列表虚拟化并不简单，幸运的是，你可以直接使用现有的社区库：

  • vue-virtual-scroller (https://github.com/Akryum/vue-virtual-scroller)

  • vue-virtual-scroll-grid (https://github.com/rocwang/vue-virtual-scroll-grid)

  • vueuc/VVirtualList (https://github.com/07akioni/vueuc)

减少大型不可变数据的响应性开销

Vue 的响应性系统默认是深度的。虽然这让状态管理变得更直观，但在数据量巨大时，深度响应性也会导致不小的性能负担，因为每个属性访问都将触发代理的依赖追踪。好在这种性能负担通常只有在处理超大型数组或层级很深的对象时，例如一次渲染需要访问 100,000+ 个属性时，才会变得比较明显。因此，它只会影响少数特定的场景。

Vue 确实也为此提供了一种解决方案，通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理。这使得对深层级属性的访问变得更快，但代价是，我们现在必须将所有深层级对象视为不可变的，并且只能通过替换整个根状态来触发更新：

const shallowArray = shallowRef([/* 巨大的列表，里面包含深层的对象 */
])// 这不会触发更新...
shallowArray.value.push(newObject)
// 这才会触发更新
shallowArray.value = [...shallowArray.value, newObject]// 这不会触发更新...
shallowArray.value[0].foo = 1
// 这才会触发更新
shallowArray.value = [{...shallowArray.value[0],foo: 1},...shallowArray.value.slice(1)
]
避免不必要的组件抽象

有些时候我们会去创建无渲染组件或高阶组件 (用来渲染具有额外 props 的其他组件) 来实现更好的抽象或代码组织。虽然这并没有什么问题，但请记住，组件实例比普通 DOM 节点要昂贵得多，而且为了逻辑抽象创建太多组件实例将会导致性能损失。

需要提醒的是，只减少几个组件实例对于性能不会有明显的改善，所以如果一个用于抽象的组件在应用中只会渲染几次，就不用操心去优化它了。考虑这种优化的最佳场景还是在大型列表中。想象一下一个有 100 项的列表，每项的组件都包含许多子组件。在这里去掉一个不必要的组件抽象，可能会减少数百个组件实例的无谓性能消耗。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/686320.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2024年危险化学品经营单位主要负责人证模拟考试题库及危险化学品经营单位主要负责人理论考试试题

2024年危险化学品经营单位主要负责人证模拟考试题库及危险化学品经营单位主要负责人理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年危险化学品经营单位主要负责人证模拟考试题库及危险化学品经营单位主要负责人理论考试试题是由安全生产模拟考试一点通提供&#xff0c;危险化学品经营单位主要负责人证模拟考试题库是根据危险化学品经营单位主…
阅读更多...
Unity3D 游戏开发中如何判断几何形状的位置关系详解

Unity3D 游戏开发中如何判断几何形状的位置关系详解

前言 在Unity3D游戏开发中&#xff0c;经常需要判断不同几何形状之间的位置关系&#xff0c;以便进行碰撞检测、物体运动和触发事件等操作。本文将详细介绍几种常见的几何形状位置关系判断方法&#xff0c;并给出相应的技术详解和代码实现。 对惹&#xff0c;这里有一个游戏开…
阅读更多...
对链表使用插入排序的C语言实现示例

对链表使用插入排序的C语言实现示例

#include <stdio.h> #include <stdlib.h>// 定义链表节点结构体 struct ListNode {int val;struct ListNode *next; };// 插入排序函数 struct ListNode* insertionSortList(struct ListNode* head) {if (head NULL || head->next NULL) {return head;}struct…
阅读更多...
【天衍系列 03】深入理解Flink的Watermark：实时流处理的时间概念与乱序处理

【天衍系列 03】深入理解Flink的Watermark：实时流处理的时间概念与乱序处理

文章目录 01 基本概念02 工作原理03 优势与劣势04 核心组件05 Watermark 生成器 使用06 应用场景07 注意事项08 案例分析8.1 窗口统计数据不准8.2 水印是如何解决延迟与乱序问题&#xff1f;8.3 详细分析 09 项目实战demo9.1 pom依赖9.2 log4j2.properties配置9.3 Watermark水印…
阅读更多...
机器学习入门--LSTM原理与实践

机器学习入门--LSTM原理与实践

LSTM模型 长短期记忆网络&#xff08;Long Short-Term Memory&#xff0c;LSTM&#xff09;是一种常用的循环神经网络&#xff08;RNN&#xff09;变体&#xff0c;特别擅长处理长序列数据和捕捉长期依赖关系。本文将介绍LSTM模型的数学原理、代码实现和实验结果&#xff0c;并…
阅读更多...
OpenCV库及在ROS中使用

OpenCV库及在ROS中使用

OpenCV库及在ROS中使用 依赖 cv_bridge image_transport roscpp rospy sensor_msgs std_msgsCMakeLists.txt添加 find_package(OpenCV REQUIRED) include_directories(${OpenCV_INCLUDE_DIRS}) target_link_libraries(pub_img_topic ${catkin_LIBRARIES} ${Opencv_LIBS}) C …
阅读更多...
基于springboot大学生租房系统源码和论文

基于springboot大学生租房系统源码和论文

伴随着全球信息化发展&#xff0c;行行业业都与计算机技术相衔接&#xff0c;计算机技术普遍运用于各大行业&#xff0c;大学生租房系统便是其中一种。实施计算机系统来管理可以降低大学生租房管理的成本&#xff0c;使整个大学生租房的发展和服务水平有显著提升。 本论文主要面…
阅读更多...
Github Copilot是什么？Ai高效编程！一键远程授权…

Github Copilot是什么？Ai高效编程！一键远程授权…

GitHub Copilot是一款Ai编程插件&#xff0c;由OpenAi和Github联合推出&#xff0c;目前支持主流的IDE编辑器安装使用&#xff0c;包括JetBrains IDEs、VSCode、Visual Studio、Neovim等。 官方地址&#xff1a;https://github.com/features/copilot 官方文档&#xff1a;http…
阅读更多...
VBA即用型代码手册之取消隐藏工作表及删除工作表

VBA即用型代码手册之取消隐藏工作表及删除工作表

我给VBA下的定义&#xff1a;VBA是个人小型自动化处理的有效工具。可以大大提高自己的劳动效率&#xff0c;而且可以提高数据的准确性。我这里专注VBA,将我多年的经验汇集在VBA系列九套教程中。 作为我的学员要利用我的积木编程思想&#xff0c;积木编程最重要的是积木如何搭建…
阅读更多...
基于Python的爬取天气数据及可视化分析

基于Python的爬取天气数据及可视化分析

项目查看&#xff1a;基于Python的爬取天气数据及可视化分析 摘 要 天气数据视化系统是一种能自动从网络上收集水情信息分析的工具&#xff0c;可根据用户的需求定向采集特定天气数据信息来作可视化分析&#xff0c;自动在网络上获取网页源码。对于天气数据视化系统信息数量较…
阅读更多...
【maya 入门笔记】基本视图和拓扑

【maya 入门笔记】基本视图和拓扑

1. 界面布局 先看基本窗口布局&#xff0c;基本窗口情况如下&#xff1a; 就基本窗口布局的情况来看&#xff0c;某种意义上跟blender更像一点&#xff08;与3ds max相比&#xff09;。 那么有朋友就说了&#xff0c;玛格基&#xff0c;那blender最下面的时间轴哪里去了&…
阅读更多...
Shell:终端输入一个字符，判断是大写字母小写字母还是数字字符。

Shell:终端输入一个字符，判断是大写字母小写字母还是数字字符。

#!/bin/bash # 获取用户输入 read char case $char in [[:upper:]]) echo 大写 ;; [[:lower:]]) echo 小写 ;; [1-9]) echo 数字 ;; esac
阅读更多...
使用PaddleNLP UIE模型提取上市公司PDF公告关键信息

使用PaddleNLP UIE模型提取上市公司PDF公告关键信息

项目地址&#xff1a;使用PaddleNLP UIE模型抽取PDF版上市公司公告 - 飞桨AI Studio星河社区 (baidu.com) 背景介绍 本项目将演示如何通过PDFPlumber库和PaddleNLP UIE模型&#xff0c;抽取公告中的相关信息。本次任务的PDF内容是破产清算的相关公告&#xff0c;目标是获取受理…
阅读更多...
pubg开启之路

pubg开启之路

概要&#xff1a; pubg中文名绝地求生&#xff0c;一款免费游戏&#xff0c;本篇主要讲述如何在电脑上开始pubg 要想下载并开始玩pubg有两个方法(具体就是两个软件)&#xff0c;一个是epic games&#xff0c;另一个是steam 一、加速器是必要的吗&#xff1f; 1、不使用加速…
阅读更多...
Pandas数据库大揭秘：read_sql、to_sql 参数详解与实战篇【第81篇—Pandas数据库】

Pandas数据库大揭秘：read_sql、to_sql 参数详解与实战篇【第81篇—Pandas数据库】

Pandas数据库大揭秘&#xff1a;read_sql、to_sql 参数详解与实战篇 Pandas是Python中一流的数据处理库&#xff0c;而数据库则是数据存储和管理的核心。将两者结合使用&#xff0c;可以方便地实现数据的导入、导出和分析。本文将深入探讨Pandas中用于与数据库交互的两个关键方…
阅读更多...
代码随想录 Leetcode135. 分发糖果

代码随想录 Leetcode135. 分发糖果

题目&#xff1a; 代码(首刷看解析 2024年2月15日&#xff09;&#xff1a; class Solution { public:int candy(vector<int>& ratings) {vector<int> left(ratings.size(), 1);vector<int> right(ratings.size(), 1);for (int i 1; i < ratings.si…
阅读更多...
Docker安装和使用Redis

Docker安装和使用Redis

Docker安装和使用Redis 一、拉取 Redis 镜像二、根据镜像运行容器三、配置 Redis 密码1、进入 redis 容器内部2、使用 redis 命令行设置密码 一、拉取 Redis 镜像 docker pull redis二、根据镜像运行容器 docker run \ --name redis \-p 6379:6379 \-d \redis \redis-server …
阅读更多...
Object

Object

Object类的作用 Object类是Java中所有类的父类&#xff0c;所以&#xff0c;Java中所有类的对象都可以直接使用Object类中提供的一些方法 Object类的常见方法 方法名说明public String toString()返回对象的字符串表示形式public boolean equals(Object o)判断两个对象…
阅读更多...
JAVASE进阶：网络编程（编程实现TCP、UDP传输）

JAVASE进阶：网络编程（编程实现TCP、UDP传输）

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;JAVASE进阶&#xff1a;高级写法——方法引用&#xff08;Mybatis-Plus必学前置知识&#xff09; &#x1f4da;订阅专栏&#x…
阅读更多...
pytorch tensor张量的操作

pytorch tensor张量的操作

import torch import torch.nn as nn import unittest# 创建一个简单的 Conv2d 层 conv_layer nn.Conv2d(in_channels3, out_channels4, kernel_size3, stride1, padding1) # input_tensor torch.randn(1, 3, 5, 5) input_tensor torch.ones(1, 3, 5, 5) # print("inpu…
阅读更多...
最新文章

Copyright @ 2022~2023