Vue 项目文件大小优化

优化逻辑

任何优化需求,都有一个前提,即可衡量。

那 Vue 加载速度的优化需求,本质上是要降低加载静态资源的大小。

所以,优化前,需要有一个了解项目现状的资源加载大小情况。

主要分 3 步走:

  • 找到方法测量打包文件大小的方式。

  • 完成打包文件大小的测量。

  • 根据测量结果,对大文件进行针对性地优化处理。

思路捋顺后,核心就是要找到一个可测量的工具

而要测量项目运行包的各个文件大小,关键在于要测量项目打包构建后的各个文件大小。

所以测量工具插件,和打包环境密切相关。

不同的环境下,有不同的测量工具。

以下罗列了当前 Vue3 项目下常用的打包环境及包大小测量和分析插件。

Vue3 + Vite 环境

安装插件

npm install vite-plugin-compression --save-dev

配置插件

vite.config.js 文件中添加 rollup-plugin-visualizer 插件的配置,如下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'  // 引入 visualizer 插件export default defineConfig({plugins: [vue(),visualizer({open: true,  // 构建完成后会自动打开浏览器,显示可视化报告。如果您不想自动打开,可以设置为 false。filename: 'stats.html',  // 生成的报告文件名称,默认保存为项目根目录下的 stats.html 文件,您可以修改路径和文件名。gzipSize: true,  // 显示各文件在经过 gzip 压缩后的大小brotliSize: true  // 显示各文件在经过 brotli 压缩后的大小})],build: {rollupOptions: {output: {manualChunks(id) {if (id.includes('node_modules')) {return id.toString().split('node_modules/')[1].split('/')[0].toString();}}}}}
});

构建项目生成报告

npm run build

构建完成后,按照配置会自动生成报告 stats.html 文件。

如果配置为 open:true,则会在构建完成后自动打开报告页面。

报告示例

如上图,打包文件占比较大的主要是以下 3 个包/文件:

  • element-plus:

  • lodash.js

  • ort.min.js

所以,根据占比较大的文件去做针对性的优化即可。

Vue3 + Vue Cli 环境(Webpack打包)

安装插件

npm install --save-dev webpack-bundle-analyzer

配置插件

vue.config.js 中引入并配置 webpack-bundle-analyzer 插件。

const { defineConfig } = require('@vue/cli-service')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = defineConfig({transpileDependencies: true,configureWebpack: {plugins: [new BundleAnalyzerPlugin({analyzerMode: 'static', // 生成静态 HTML 文件openAnalyzer: true, // 构建完成后自动打开浏览器展示报告reportFilename: 'bundle-report.html', // 报告文件名,可以自定义路径和名称}),],},
});

构建项目生成报告

在配置完成后,您可以运行以下命令构建项目,并生成报告:

npm run build

构建完成后,webpack-bundle-analyzer 会生成一个静态的 HTML 文件(默认在 dist/ 目录下,或根据 reportFilename 的配置),并自动在浏览器中打开。可以在报告中查看每个模块的体积以及其依赖关系。

报告示例

Vue3 + Rollup 环境

安装插件

npm install --save-dev rollup-plugin-visualizer

配置插件

rollup.config.js 文件中添加该插件:

import { visualizer } from 'rollup-plugin-visualizer';export default {input: 'src/main.js', // 项目的入口文件output: {file: 'dist/bundle.js', // 输出文件format: 'es',},plugins: [// 其他插件visualizer({open: true, // 构建完成后自动打开浏览器展示报告filename: 'stats.html', // 生成的报告文件名gzipSize: true, // 显示 gzip 压缩后的大小brotliSize: true // 显示 brotli 压缩后的大小})],
};

构建项目生成报告

npx rollup -c

构建完成后,按照配置会自动生成报告 stats.html 文件。

如果配置为 open:true,则会在构建完成后自动打开报告页面。

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

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

相关文章

ZYNQ使用XGPIO驱动外设模块(前半部分)

目录 目录 一、新建BD文档,添加ZYNQ处理器 1.BD文档: 2.在Vivado中,BD文件的生成过程通常包括以下步骤: 1)什么是Tcl Console: 3.PL部分是FPGA可编程逻辑部分,它提供了丰富的IO资源,可以用于实现各种硬件接口和功…

3dsMax添加天空盒

点击渲染,环境 , 点击位图 找到要设置的天空HDR,可以使用HDR(EXR)贴图 一个可以下载HDR贴图的网站 https://polyhaven.com/hdris在渲染的时候不要使用使用微软输入法,3dsmax会卡死, 在渲染的时候不要使用使用微软…

架构师之路-学渣到学霸历程-10

文件传输讲解 今天分享两个文件传输的命令; 这个实验做起来也是非常简单的,可以跟着去做就能够实现了; 增强一下自己的成就感也不错; 1.scp命令 作用:加码的方式在本地主机和远程主机之间复制文件语法:s…

【Kubernetes】常见面试题汇总(五十九)

目录 129.问题:pod 使用 PV 后,无法访问其内容? 130.查看节点状态失败? 特别说明: 题目 1-68 属于【Kubernetes】的常规概念题,即 “ 汇总(一)~(二十二&#xf…

《向量数据库指南》 ——KG-RAG 新突破:有限跳数假设下的高效解法

我们观察到在实际的 KG-RAG 场景中,存在跳数有限性假设:在 KG-based RAG 中,实际问的 query 问题的查询路由只需要在知识图谱中进行有限的,且很少的跳数(如少于4跳)的查询,而并不需要在其中进行非常多次跳数。 我们的跳数有限性假设基于两点很重要的观察:1. query 复杂…

Flutter全局统一自定义导航栏返回按钮

Flutter全局统一自定义导航栏返回按钮 在Flutter开发中,导航栏(AppBar)是用户界面的重要组成部分,它不仅提供了页面标题,还可能包含返回按钮、导航按钮等。默认情况下,每个Scaffold的AppBar都会包含一个返…

Iceberg Catalog 的实现和迁移

Iceberg Catalog 的需求 Iceberg Catalog 的接口定义了各种 Catalog 需要实现的方法,主要包括列出存在的表,创建表,删除表,检查表是否存在,给表改名。 如果一个 Iceberg catalog 使用在生产中,主要需是原…

UE5运行时动态加载场景角色动画任意搭配-场景角色相机动画音乐加载方法(三)

1、将场景打包为Pak并加载 1、参考这篇文章将场景打包为pak,UE4打包并加载Pak-Windows/iOS/Android不同平台Editor/Runtime不同运行模式兼容 2、在Mount Pak后直接打开Map即可 void UMapManager::OpenMap(FString Path) {UWorld* World = UGlobalManager::GetInstance()->…

自然语言处理(NLP)论文数量的十年趋势:2014-2024

引言 近年来,自然语言处理(NLP)已成为人工智能(AI)和数据科学领域中的关键技术之一。随着数据规模的不断扩大和计算能力的提升,NLP技术从学术研究走向了广泛的实际应用。通过观察过去十年(2014…

基于Zabbix进行服务器运行情况监测

文章目录 引言I Zabbix主要构成下载并安装Zabbix被监控主机安装zabbix agent创建被监控主机报警设置II 常见问题cannot use database "zabbix": its "users" table is empty (is this the Zabbix proxy database?)重置 Zabbix Web 界面密码Zabbix agent i…

还做单元测试吗?

软件单元测试分为狭义的单元测试和广义的单元测试。 前者是指对被测代码的各种函数、接口等进行测试,以验证它们的功能、性能和安全性。 后者是指对页面的每一个组件(如文本框、按钮等)进行测试,以验证它们的功能、性能和安全性…

京准电钟:NTP时间服务器让大数据时钟同步

京准电钟:NTP时间服务器让大数据时钟同步 京准电钟:NTP时间服务器让大数据时钟同步 NTP是一种用于同步网络中设备时间的协议,广泛用于互联网和局域网中。NTP网络时间服务器则是基于NTP协议构建,为网络中的设备提供时间同步服务的服…

MySQL学习笔记(持续更新,目前到十一章锁)

1、Mysql概述 1.1 数据库相关概念 三个概念:数据库、数据库管理系统、SQL 名称全称简称数据库存储数据的仓库,数据是有组织的进行存储DataBase(DB)数据库管理系统操纵和管理数据库的大型软件DataBase Mangement System&#xf…

【Qt】详细Qt基础 (包括自定义控件)

目录 QT 概述创建项目项目文件(. pro)main.cppmainwindow.uimainwindow.hmainwindow.cpp 窗口类QWidget 窗口显示QDialog 窗口 QPushButton创建显示 对象树基本概念功能 坐标体系控件Item WidgetsQListWidgetQTreeWidgetQTableWidget 自定义控件 QT 概述…

结构型设计模式详解与总结

一、什么是结构型设计模式 结构型设计模式的主要目的是处理类或对象之间的组合与继承问题,通过组织类和对象来形成更大的结构,帮助我们更好地解决类与类、对象与对象之间的耦合问题。这类模式通过定义如何组合对象来实现新的功能,着重于解决…

2024 年热门前端框架对比及选择指南

在前端开发的世界里,框架的选择对于项目的成功至关重要。不同的框架有着不同的设计理念、生态系统和适用场景,因此,开发者在选框架时需要权衡多个因素。本文将对当前最流行的前端框架——React、Vue、Angular、Svelte 和 Solid——进行详细对…

AI免费文档处理在线工具:ColPali文本检索文档

1、ColPali 原理还是对比学习,图像和文本,文档通过图像模型,文本通过大模型gemma https://huggingface.co/spaces/manu/ColPali-demo 检索pdf

k8s 中存储之 PV 持久卷 与 PVC 持久卷申请

目录 1 PV 与 PVC 介绍 1.1 PersistentVolume(持久卷,简称PV) 1.2 PersistentVolumeClaim(持久卷声明,简称PVC) 1.3 使用了PV和PVC之后,工作可以得到进一步的细分: 2 持久卷实验配置…

深度0.1%调光恒流芯片SL8701支持PWM调光 模拟调光 无频闪 多路共阳

一、芯片概述 SL8701是一款内置100V MOS的降压型高调光比LED恒流驱动芯片,专为智能调光调色照明研发设计。它支持多种调光方式,包括PWM调光和模拟调光,能够实现高调光比,满足不同场景的照明需求。 二、主要特性 PWM调光支持&am…

【STM32】STM32CubeMX 之 Timers配置 【笔记】

环境 硬件:通用PC 系统: Windows 10 软件 :STM32CubeMX 在STM32CubeMX的Timer配置中,每个选项都有特定的含义。以下是逐一解释这些选项: 1. Mode 配置 a. Clock Source: 时钟源 Internal Clock: 使用内部时钟&…