前端常用的性能优化方案

目录

      • 性能分析工具
        • lighthouse
        • Webpack Bundle分析
      • 开发阶段
        • 按需引入
        • 路由懒加载
      • 打包阶段
        • 打包配置减少包体积
          • 配置压缩
          • 分包
        • 资源预加载/预请求
      • 部署阶段
        • 开启http2
        • 静态资源缓存
        • gzip压缩

性能优化主要在三个阶段进行:开发阶段、开发结束后的打包阶段、项目部署上线阶段

首先需要知道性能优化要达到的目的就是让页面加载更快,也就是需要让代码打包后的体积尽可能的小以及让资源请求时机分配更合理

在我独立开发的博客全栈项目也用到了性能优化,在项目开发结束后不进行优化直接部署上线后后台的lighthouse打分只有50多分,性能很差,白屏时间也长,经过一系列的优化后再次部署上线,前台lighthouse跑分100分,后台也有80多分,加载速度有了很大的提升。

前台lighthouse:

前台lighthouse.jpg

后台lighthouse:

后台lighthouse.jpg

性能分析工具

lighthouse

谷歌浏览器自带的开发者工具,在项目部署上线后可以f12找到lighthouse对项目进行跑分,lighthouse不仅能通过评分直观的看到项目的整体性能情况,还能提出项目的性能问题,可以依照提出的问题对项目进行优化

Webpack Bundle分析

webpack中提供了对打包的项目文件体积直观展示的插件webpack-bundle-analyzer,安装后在vue.config.js中配置,然后在执行了打包命令打包结束后就会自动打开浏览器展示打包的各文件体积,可以直观的看到哪些文件体积过大,也能看到哪些依赖包项目并没有用到却忘了移除,可以通过这个插件去优化项目的包体积

// vue.config.js配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {configureWebpack: {plugins: [new BundleAnalyzerPlugin()],},
}

效果图:

在这里插入图片描述

开发阶段

开发过程中按需引入、懒加载、请求合理化、代码精简等

按需引入

往往一个项目中需要用到很多的第三方依赖,而在开发中也许用不到依赖的所有方法和组件,这时候就需要对第三方依赖进行按需引入,只引入代码中需要用到的组件或方法,以减少打包时的包体积;比如项目中使用element组件库就尽量使用官网提供的按需引入的方法

路由懒加载

SPA中一个很重要的提速手段就是路由懒加载,当打开页面时才去加载对应文件,我们利用Vue的异步组件和webpack的代码分割(import())就可以轻松实现懒加载了。

但当路由过多时,请合理地用webpack的魔法注释对路由进行分组,太多的chunk会影响构建时的速度

    // 进入register页面时才会加载对应的路由组件{path: 'register',name: 'register',component: () => import(/* webpackChunkName: "user" */ '@/views/user/register'),}

在开发过程中也需要注意合理使用请求,网络请求也是性能优化的一方面,在项目开发过程中需要注意请求的时机,合理分配请求,去除无用请求等

打包阶段

打包配置减少包体积

webpack/vite打包阶段对代码进行压缩、图片压缩、分包、去除无用代码、资源预加载等操作让代码包体积减小以及合理分配资源请求,从而实现部署上线后缩短请求时间等

对webpack/vite进行配置也是性能优化中很重要的一环,通过合理的打包配置可以大幅减少项目包体积。

配置压缩

vue-cli配置图片压缩以及gzip压缩:

module.exports = {// 修改已有的plugins/loader时使用chainWebpackchainWebpack: config => {// 压缩图片// 需要 npm i -D image-webpack-loaderconfig.module.rule("images").use("image-webpack-loader").loader("image-webpack-loader").options({mozjpeg: { progressive: true, quality: 65 },optipng: { enabled: false },pngquant: { quality: [0.65, 0.9], speed: 4 },gifsicle: { interlaced: false },webp: { quality: 75 }});},// 添加新的plugins/loader以及webpack配置项时使用configureWebpackconfigureWebpack: config => {// 开启 gzip 压缩// 需要 npm i -D compression-webpack-pluginconst plugins = [];if (IS_PROD) {plugins.push(new CompressionWebpackPlugin({filename: "[path].gz[query]",algorithm: "gzip",test: productionGzipExtensions,threshold: 10240,minRatio: 0.8}));}config.plugins = [...config.plugins, ...plugins];}
}

vite配置图片压缩、gzip压缩、移除console.log:

    import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'//引入gzip压缩import viteCompression from 'vite-plugin-compression'//压缩图片import viteImagemin from 'vite-plugin-imagemin'// https://vitejs.dev/config/export default defineConfig({//配置打包公共根路径base: "./",plugins: [vue(),//gzip压缩viteCompression({verbose: true,disable: false,threshold: 10240,algorithm: 'gzip',ext: '.gz',}),//图片压缩viteImagemin({gifsicle: {optimizationLevel: 7,interlaced: false},optipng: {optimizationLevel: 7},mozjpeg: {quality: 20},pngquant: {quality: [0.8, 0.9],speed: 4},svgo: {plugins: [{name: 'removeViewBox'},{name: 'removeEmptyAttrs',active: false}]}})],//生产环境配置build: {//移除console.logminify: 'terser', // 默认为esbuild,需要安装terser -DterserOptions: {compress: {// drop_console: true, // 生产环境移除console// drop_debugger: true // 生产环境移除debugger}}}})
分包

vue-cli3的默认优化是将所有npm依赖都打进chunk-vendor,但这种做法在依赖多的情况下导致chunk-vendor过大,可以在vue.config.js中配置分包策略,将第三方依赖包单独打包,避免打包后单一文件过大导致请求加载缓慢。

    optimization: isProd ? {splitChunks: {chunks: 'all',maxInitialRequests: Infinity, // 默认为3,调整为允许无限入口资源minSize: 20000, // 20K以下的依赖不做拆分cacheGroups: {vendors: {// 拆分依赖,避免单文件过大拖慢页面展示// 得益于HTTP2多路复用,不用太担心资源请求太多的问题name(module) {// 拆包const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1]// 进一步将Ant组件拆分出来,请根据情况来// const packageName = module.context.match(/[\/]node_modules[\/](?:ant-design-vue[\/]es[\/])?(.*?)([\/]|$)/)[1]return `npm.${packageName.replace('@', '')}` // 部分服务器不允许URL带@},test: /[\/]node_modules[\/]/,priority: -10,chunks: 'initial'}}},runtimeChunk: { name: entrypoint => `runtime-${entrypoint.name}` }} : {}
  1. vue inspect > output.js --mode production 可以查看最终配置
  2. 分包这块需要根据实际情况做对应处理,才能取得比较好的效果,总之多看文档多试就对了
资源预加载/预请求
标签的rel属性的两个可选值。Prefetch,预请求,是为了提示浏览器,用户未来的浏览有可能需要加载目标资源,所以浏览器有可能通过事先获取和缓存对应资源,优化用户体验。Preload,预加载,表示用户十分有可能需要在当前浏览中加载目标资源,所以浏览器必须预先获取和缓存对应资源。

Prefetch、Preload在某些场景下可以有效优化用户体验。

Vue-Cli3默认会使用preload-webpack-plugin对chunk资源做preload、prefetch处理,入口文件preload,路由chunk则是prefetch。

一般来说不需要做特别处理,如果判断不需要或者需要调整在vue.config.js中配置即可

部署阶段

服务器部署项目用nginx开启http2、静态资源缓存、资源压缩等减少项目包的请求时间和次数等

项目部署阶段借助nginx也可以对项目性能进行优化。

开启http2

http2有着多路复用和头部信息压缩的特性,项目开启http2可以同时处理多个请求,加快请求时间,开启http2之前需要给项目开启https,具体怎么开启https以及http2可以看我这篇文章:网站使用nginx部署ssl证书开启https(开启http2)

静态资源缓存

nginx还可以配置静态资源缓存,对项目的静态资源配置缓存后在资源第一次请求后会将资源缓存下来,后续就可以直接使用缓存,在缓存到期之前都不会再次请求该静态资源,可以加快资源获取时间

#静态资源缓开启缓存location ~ .*.(gif|jpg|jpeg|png|bmp|swf)${# 这里同样需要反向代理,不然请求路径会是haixtx.cn:82,会出现404proxy_pass http://114.55.75.3:8000;expires 30d;}location ~ .*.(js|css)?${proxy_pass http://114.55.75.3:8000;expires 12h;}
gzip压缩

nginx也可以配置gzip压缩,HTTP协议中用头部字段Accept-EncodingContent-Encoding对「采用何种编码格式传输正文」进行了协定,请求头的Accept-Encoding会列出客户端支持的编码格式。当响应头的Content-Encoding指定了gzip时,浏览器则会进行对应解压

一般浏览器都支持gzip,所以Accept-Encoding也会自动带上gzip,所以我们需要让资源服务器在Content-Encoding指定gzip,并返回gzip文件

    #开启和关闭gzip模式gzip on;#gizp压缩起点,文件大于1k才进行压缩gzip_min_length 1k;# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间gzip_comp_level 6;# 进行压缩的文件类型。gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;# nginx对于静态文件的处理模块,开启后会寻找以.gz结尾的文件,直接返回,不会占用cpu进行压缩,如果找不到则不进行压缩gzip_static on# 是否在http header中添加Vary: Accept-Encoding,建议开启gzip_vary on;# 设置gzip压缩针对的HTTP协议版本gzip_http_version 1.1;

虽然上面配置后Nginx已经会在响应请求时进行压缩并返回Gzip了,但是压缩操作本身是会占用服务器的CPU和时间的,压缩等级越高开销越大,所以我们通常会一并上传gzip文件,让服务器直接返回压缩后文件,所以还需要在项目打包阶段配置gzip,具体配置上面已经讲过了

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

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

相关文章

提升生产效率:APS高级计划排程系统在车间工序级排程的革命性应用

在制造业的数字化转型浪潮中,APS高级计划排程系统以凭借自身卓越的排程运算能力和应用灵活性,已经成为中大型制造业提升生产效率的关键工具。APS系统的介入,打通了传统ERP和MES等各类业务系统运营平台,并且通过产能均衡规划&#…

为什么我3d模型选择面选不到?---模大狮模型网

在展览3D模型设计行业中,设计师常常面临诸多技术挑战,其中之一是在模型编辑过程中遇到选择面的困难。这不仅影响了设计工作效率,还可能影响最终作品的质量和展示效果。本文将探讨在3D模型设计中为何会遇到“为什么我3D模型选择面选不到?”这…

【MySQL进阶篇】管理

1、系统数据库 MySQL数据库安装完成之后,自带以下四个数据库,具体作用如下: 数据库含义mysql存储MySQL服务器正常运行所需要的各种信息(时区、主从、用户、权限等)information_schema提供了访问数据库元数据的各种表…

实战OpenCV之环境安装与配置

OpenCV是什么 OpenCV,英文全称为Open Source Computer Vision Library,是一个开源的计算机视觉和机器学习软件库。它设计用于提供一系列功能强大的算法,以帮助开发者处理图像和视频数据,实现各种视觉任务,包括&#xf…

.NET内网实战:模拟Installer关闭Defender

01基本介绍 02编码实现 原理上通过Windows API函数将当前进程的权限提升至TrustedInstaller,从而实现了对Windows Defender服务的控制。通常可以利用Windows API中的OpenSCManager、OpenProcessToken、ImpersonateLoggedOnUser以及ControlService等函数协同工作&am…

从干涉实验、化学反应到晶体管的科学之旅 - 《量子宇宙》读后感

在《量子宇宙》这本书中,作者没有讲述历史和发现的故事,而是从头到尾用公式推导来展示宇宙和现代物理学的壮美。 量子理论处理的是概率,而不是确定性。大自然在某些方面本质上就是由或然率支配的。计算粒子出现的概率是我们能做到的极限。 …

渗透小游戏,各个关卡的渗透实例---步骤简单(含代码)

文章目录 Less-1Less-2Less-5updatexml报错注入: Less-6Less-7Less-8Less-9Less-11Less-13Less-15 Less-1 首先,可以看见该界面,该关卡主要是SQL注入,由于对用户的输入没有做过滤,使查询语句进入到了数据库中&#xff…

springboot电影院线上购票系统-计算机毕业设计源码68220

目录 摘要 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2系统分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统流程分析 2.2.1 添加信息流程 2.2.2 修改信息流程 2.2.3 删除信息流程 2.3 系统功能分析 2.…

synchronized 与 Lock 的区别

synchronized 与 Lock 的区别 1、相同点2、不同点2.1 精确性与灵活性2.2 性能2.3 使用便利性 3、示例3.1 synchronized 示例3.2 Lock 示例 4、总结 💖The Begin💖点点关注,收藏不迷路💖 在Java多线程编程中,synchroniz…

智能家居沙盘系统-智慧家居沙盘系统

智能家居和物联网技术是当前科技领域的热门话题,随着各类智能家居产品的不断推出,智能家居市场也逐渐呈现出蓬勃发展的态势。智能家居快速发展,而物联网相关人才供应远远不足。高校开展智能家居工程及设计人才教育培养具有重大意义。 基本介绍…

【stm32】EXTI外部中断

EXTI外部中断 1、中断系统2、中断执行流程3、STM32中断4、NVIC基本结构5、NVIC优先级分组6、EXTI简介(引脚电平变化,申请中断)7、EXTI基本结构8、AFIO复用IO口9、EXTI框图10、旋转编码器简介11、程序设计:1.使用对射式红外传感器触…

vue3实现商品图片放大镜效果(芋道源码yudao-cloud 二开笔记)

今天开发一个防某商城的商品图片放大镜,鼠标移动到图片位置时,右侧出现一个已放大的图片效果。 示例如下: 下图的图片的放大效果和小图的切换封装成了组件PicShow.vue,可根据需求自行修改,如下: 第一步&…

Html5总结

前端学习 html决定页面的结构css决定页面的样式js决定页面的行为 Html5 1.文本格式化标签(熟记) 你在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标记 2.标签属性 例如: …

算法 —— 位运算

目录 位运算常用结论 位运算例题 位1的个数 比特位计算 汉明距离 只出现一次的数字 判定字符是否唯一 丢失的数字 两整数之和 消失的两个数字 进制转换 位运算常用结论 想详细了解位运算的内容可以阅读我的这篇博客:应该背下的位运算 以下我只介绍一些位…

3.特征工程-特征抽取、特征预处理、特征降维

文章目录 环境配置(必看)头文件引用1.数据集: sklearn代码运行结果 2.字典特征抽取: DictVectorizer代码运行结果稀疏矩阵 3.文本特征抽取(英文文本): CountVectorizer()代码运行结果 4.中文文本分词(中文文本特征抽取使用)代码运行结果 5.中文文本特征抽…

Linux基础笔记分享(超详细~)

文章目录 Linux基础1.基础概念2.基础命令命令行快捷键自动补全: tab移动光标快速删除翻看历史命令终止程序退出登录清屏 查看命令帮助alias命令别名-快捷键pwd-类似于地图cd-类似于传送术mkdir-类似于合成装备touch-创建文件ls-类似于查看装备tree-打印目录层级结构cp-复制命令…

HarmonyOS 习题(一)

1、在HarmonyOS系统架构中,以下哪项属于应用层? A)AI子系统 B)U框架 C)电话 D)内核 答案:C 解析: 2、在HarmonyOS系统架构中,以下哪项提供统一的外设访问能力和驱动的开发管理框架…

sqli-labs靶场练习(1、5-8关)

自己搭建环境啊喂...http://127.0.0.1/sqli-labs-php7-master/ 第一关 1.单引号判断是否存在注入点 /?id1 2.查询列数 ?id1 order by 3-- ?id1 order by 4-- 由此可判断有3列 3.查询用户名和密码分别在哪列 ?id-1 union select 1,2,3 -- 4.查询数据库名称为security ?…

81.SAP ME - SAP SMGW Getway Monitor

目录 1.起因 2.SMGW Displaying Logged On Clients Displaying Remote Gateways Display and Control Existing Connections Deleting a Connection Displaying Gateway Release Information Displaying Parameters and Attributes of the Gateway Change Gateway Pa…

js中的ajax【Axios,XMLHttpRequest,Promise,async】回调函数地狱等问题

目录 前置知识 1.什么是异步请求? 2.什么是回调函数 3.如何查看网页的异步请求(XHR)? 4.什么是ajax jquery的ajax,xhr,axios关系 正文---几种请求之间的关系 axios Axios的诞生 Axios的介绍 定义…