当前位置： 首页 > news >正文

Vue项目打包优化（element+echarts+vue使用cdn）

news 2026/3/27 5:34:34

如何打包查看所有资源大小？
使用插件：webpack-bundle-analyzer
效果图：
在这里插入图片描述

安装webpack-bundle-analyzer

第一步，终端执行

npm instatll webpack-bundle-analyzer --save-dev

第二步，vue.config.js配置

module.exports = {chainWebpack(config) {// 这里我做了只有开发环境才使用，关键代码是if下面的if (process.env.NODE_ENV === 'development') {config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)}}
}

有的小白同学就要问了，说 为什么我的chainWebpack是这样的箭头函数：
chainWebpack: config => {
}
其实用法是一样的，丢到里面就行了！

第三步，package.json配置
在的你打包命令后面加上 --report

"build": "vue-cli-service build --report"

然后执行打包命令，npm run build 即可看到效果！

Element-UI使用CDN

第一步，vue.config.js配置

module.exports = {configureWebpack: {externals: {'element-ui': 'ELEMENT'}}
}

第二步，index.html引入cdn地址

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="renderer" content="webkit" />增加：<link rel="stylesheet" href="elementui.css的cdn地址" /></head><body>增加：<script src="elementui.js的cdn地址"></script><div id="app"></div></body>
</html>

没有地址？没关系，我推荐一个cdn网站：
https://www.bootcdn.cn/
在这里插入图片描述
打开搜索你需要的cdn名称，选择你要的指定版本。
ctrl+f 搜索：theme-chalk.css和index.js 复制
在这里插入图片描述

在这里插入图片描述
粘贴替换以上地址即可。
然后返回页面即可使用。

Element-UI使用cdn后Loading和Message无效报错？

是的，这两个在js的使用方法方法有所不同，要使用下面的方式：
vue2：loading

// 使用ELEMENT.Loading
ELEMENT.Loading.service(options)

vue3：loading

ElementPlus.ElLoading.service(options)

那么同理，vue.config.js的cdn也要改成如下：

'element-plus': 'ElementPlus',

ok，然后就没问题了，如有问题，下面留言！

echarts使用cdn

跟以上方式一样，vue.config.js配置：

externals: {echarts: 'echarts'
}

然后cdn搜索echarts，找到echarts.min.js。
在这里插入图片描述

然后index.html引入

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="renderer" content="webkit" /><link rel="stylesheet" href="elementui.css的cdn地址" /></head><body><script src="elementui.js的cdn地址"></script>增加2：<script src="echarts.js的cdn地址"></script><div id="app"></div></body>
</html>

然后页面直接可以使用。echarts.init()

Vue使用cdn

同理，搜索vue选版本，找到vue.min.js
在这里插入图片描述
index.html引入
记住引入顺序，vue>elementui

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="renderer" content="webkit" /><link rel="stylesheet" href="elementui.css的cdn地址" /></head><body>增加：<script src="vue.js的cdn地址"></script><script src="elementui.js的cdn地址"></script><script src="echarts.js的cdn地址"></script><div id="app"></div></body>
</html>

配置gzip打包压缩

安装compression-webpack-plugin，注意，需指定版本

npm i compression-webpack-plugin@6.1.1 --save

vue.config.js修改

const CompressionWebpackPlugin = require('compression-webpack-plugin')module.exports = {chainWebpack(config) {config.plugin('compression').use(CompressionWebpackPlugin, [{filename: '[path][base].gz',algorithm: 'gzip',test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),threshold: 10240,minRatio: 0.8}])}
}

配置其他优化项

安装图片压缩

npm install --save-dev image-webpack-loader

vue.config.js修改，以及其他优化项：

module.exports = {chainWebpack(config) {// 打包加hash时间config.output.filename('js/[name].[hash].js')config.output.chunkFilename('js/[name].[hash].js')// 移除 preload(预载) 插件config.plugins.delete('preload')// 移除 prefetch(预取) 插件config.plugins.delete('prefetch')//图片压缩config.module.rule('images').use('imageWebpackLoader').loader('image-webpack-loader').options({disable: process.env.NODE_ENV === 'development', // 开发环境下禁止压缩gifsicle: {interlaced: false}})}
}

在这里插入图片描述
感谢你的阅读，如对你有帮助请收藏+关注！
只分享干货实战和精品，从不啰嗦！！！
如某处不对请留言评论，欢迎指正~
博主可收徒、常玩QQ飞车，可一起来玩玩鸭~

相关文章：

Vue项目打包优化（element+echarts+vue使用cdn）

如何打包查看所有资源大小&#xff1f; 使用插件&#xff1a;webpack-bundle-analyzer 效果图&#xff1a; 安装webpack-bundle-analyzer 第一步&#xff0c;终端执行 npm instatll webpack-bundle-analyzer --save-dev第二步&#xff0c;vue.config.js配置 module.export…...

编程日记 2024/5/24 4:56:38

【ARM 嵌入式 C 入门及渐进 6.1 -- ARMv8 C 内嵌汇编写系统寄存器的函数实现】

请阅读【嵌入式开发学习必备专栏】 文章目录 ARMv8 C 内嵌汇编写系统寄存器 ARMv8 C 内嵌汇编写系统寄存器 在ARMv8架构下&#xff0c;使用C语言结合内嵌汇编实现将一个值写入特定系统寄存器的函数可以按照下面的方法进行。 下面这个示例展示了如何将一个uint64_t类型的值写入…...

编程日记 2024/5/24 4:55:36

ESP32基础应用之使用手机浏览器作为客户端与ESP32作为服务器进行通信

文章目录 1 准备2 移植2.1 softAP工程移植到simple工程中2.2 移植注意事项 3 验证 1 准备 参考工程 Espressif\frameworks\esp-idf-v5.2.1\examples\wifi\getting_started\softAP softAP工程演示将ESP32作为AP&#xff0c;即热点&#xff0c;使手机等终端可以连接参考工程 Esp…...

编程日记 2024/5/24 4:54:36

【课后练习分享】Java用户注册界面设计和求三角形面积的图形界面程序

目录 java编程题&#xff08;每日一练&#xff09;&#xff1a; 问题一的答案代码如下&#xff1a; 问题一的运行截图如下&#xff1a; 问题二的答案代码如下&#xff1a; 问题二的运行截图如下&#xff1a; java编程题&#xff08;每日一练&#xff09;&#xff1a; 1.…...

编程日记 2024/5/24 4:53:34

三维空间坐标系变换（旋转平移）

在探究三维空间下的变换前&#xff0c;首先研究二位空间&#xff0c;因为比较直观&#xff0c;再推广到三维空间。 首先应该清楚的一点是&#xff1a;旋转、平移对于坐标系下的点以及坐标系本身而言都是相对的&#xff08;运动的相对性&#xff09;。 例如&#xff1a; X O Y …...

编程日记 2024/5/24 4:51:32

OC笔记之foundation框架

OC学习笔记&#xff08;三&#xff09; 文章目录 OC学习笔记&#xff08;三&#xff09;常用Foundation框架结构体NSRangeNSRange结构体的定义定义 NSRange 的方法打印Range的相关信息NSRange的实际运用查找子字符串返回NSRange结构体 NSPointNSRect NSStringNSString的创建NSS…...

编程日记 2024/5/24 4:50:30

Docker部署springboot包并联通MySQL

Docker部署jar 实现功能 部署springboot下发布的jar包不同docker容器之间通信&#xff08;如MySQL访问、Redis访问&#xff09;多个jar包部署 参考文献 Just a moment… Just a moment… https://www.jb51.net/article/279449.htm springboot配置 这里使用多yaml配置文件&…...

编程日记 2024/5/24 4:49:29

多帧激光点云基于标定参数进行融合拼接

1、前言 在三维视觉技术蓬勃发展的今天&#xff0c;点云作为捕获和表示三维环境的基础数据形式&#xff0c;扮演着至关重要的角色。点云融合拼接技术&#xff0c;作为连接孤立点云片段、构建连续、全面三维场景的核心过程&#xff0c;对于自动驾驶、机器人导航、三维建模以及地…...

编程日记 2024/5/24 4:48:28

python数据类型之字符串

目录 1.字符串概念和注意事项 2.字符串内置函数 3.字符串的索引、切片和遍历 4.字符串运算符 5.字符串常用方法 性质判断 开头结尾判断 是否存在某个子串 大小写等格式转化 子串替换 删除两端空白字符 格式化字符串 分割与合并 6.字符串模板 7.exec 函数 8.字符…...

编程日记 2024/5/24 4:47:26

Vue3实战笔记（38）—粒子特效终章

文章目录 前言一、怎样使用官方提供的特效二、海葵特效总结 前言 官方还有很多漂亮的特效&#xff0c;但是vue3只有一个demo&#xff0c;例如我前面实现的两个页面就耗费了一些时间&#xff0c;今天记录一下tsparticles官方内置的几个特效的使用方法&#xff0c;一般这几个就足…...

编程日记 2024/5/24 4:46:25

晶体振荡器

一、晶振与晶体区别 晶振是有源晶振的简称&#xff0c;又叫振荡器&#xff0c;英文名称是oscillator&#xff0c;内部有时钟电路&#xff0c;只需供电便可产生振荡信号&#xff1b;晶体是无源晶振的简称&#xff0c;也叫谐振器&#xff0c;英文名称是crystal&#xff0c;是无极…...

编程日记 2024/5/24 4:45:24

单词可交互的弧形文本

在一个项目中&#xff0c;要求把少儿读本做成电子教材呈现出来&#xff0c;电子书的排版要求跟纸质书一致。其中&#xff0c;英语书有个需求&#xff1a;书中有些不规则排版的文本&#xff08;如下图所示&#xff09;&#xff0c;当随书音频播放时&#xff0c;被读到的文本要求…...

编程日记 2024/5/24 4:42:21

Linux——进程信号(一)

1.信号入门 1.1生活中的信号 什么是信号? 结合实际红绿灯、闹钟、游戏中的"&#xff01;"等等这些都是信号。 以红绿灯为例子&#xff1a; 一看到红绿灯我们就知道&#xff1a;红灯停、绿灯行&#xff1b;我们不仅知道它是一个红绿灯而且知道当其出现不同的状况…...

编程日记 2024/5/24 4:40:19

centos9 stream在线安装NVIDIA驱动（rockylinux9.4也成功安装nvidia驱动）

Install NVIDIA Drivers on CentOS Stream 9&#xff08;rockylinux9.4成功&#xff09; 主板为技嘉mz72-hb2 显卡为4090 一.Disable Secure Boot From the BIOS 二.Enabling the EPEL Repository on CentOS Stream 9 1.update the DNF package repository cache sudo dnf …...

编程日记 2024/5/24 4:39:18

springmvc不同格式的参数解析

参数解析 application/x-www-form-urlencoded格式 这种格式就是传统的表单提交格式&#xff0c;就是一个个的键值对&#xff0c;会进行url编码&#xff0c;使用springmvc接收时使用RequestParam来进行接收&#xff0c;与传入的字段一一对应&#xff0c;此时使用的参数处理器是R…...

编程日记 2024/5/24 4:38:17

Unity3D让BoxCollider根据子物体生成自适应大小

系列文章目录 unity工具 文章目录 系列文章目录unity工具 &#x1f449;前言&#x1f449;一、编辑器添加&#x1f449;二、代码动态添加的方法(第一种)&#x1f449;三、代码动态添加的方法(第二种)&#x1f449;四、重新设置模型的中心点&#x1f449;壁纸分享&#x1f449;…...

编程日记 2024/5/24 4:36:15

WSL 2 installation is incomplete.

使用的wsl2版本很旧&#xff0c;因此需要手动更新。 https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi...

编程日记 2024/5/24 4:34:12

Servlet的request对象

request对象的继承关系 1.HttpServletRequest接口继承了ServletRequest接口&#xff0c;对其父接口进行了扩展&#xff0c;可以处理满足所有http协议的请求 2.HttpServletRequest和ServletRequest都是接口&#xff0c;不能创建对象&#xff0c;因此在tomcat底层定义实现类并创…...

编程日记 2024/5/24 4:32:11

蓝桥杯-合并数列

小明发现有很多方案可以把一个很大的正整数拆成若干正整数的和。他采取了其中两种方案&#xff0c;分别将它们列为两个数组 {a1, a2, …, an} 和 {b1, b2, …, bm}。两个数组的和相同。 定义一次合并操作可以将某数组内相邻的两个数合并为一个新数&#xff0c;新数的值是原来两…...

编程日记 2024/5/24 4:29:08

《web应用技术》第9次课后作业

一、将前面的代码继续完善功能 1、采用XML映射文件的形式来映射sql语句&#xff1b; 2、采用动态sql语句的方式&#xff0c;实现条件查询的分页。 二、学习git的使用。 1、每个小组将自己的项目上传到gitee&#xff0c;学会协作开发&#xff1b; 2、学会从gitee上拉取项目…...

编程日记 2024/5/24 4:28:07

A860-2155-T611发那科分离式增量型主轴编码器

型号&#xff1a;A860-2155-T611全称&#xff1a;αiBZ SENSOR ASSY 512 (THIN TYPE) 薄型传感器总成品牌&#xff1a;FANUC&#xff08;发那科&#xff09;类型&#xff1a;分离式增量型主轴编码器&#xff08;薄型&#xff09;一、产品特性薄型分离式设计&#xff1a;传感器头…...

编程新知 2026/3/27 5:10:43

算法 POJ1029

一&#xff0e;题目大意假币描述“金条”银行从可靠来源收到的信息&#xff0c;在他们最后一组的 N 枚硬币中&#xff0c;恰好有一枚硬币是假的&#xff0c;并且重量与其他硬币不同&#xff08;而所有其他硬币的重量都相同&#xff09;。经济危机之后&#xff0c;他们只有一个简…...

编程新知 2026/3/27 4:54:16

Android NDK开发从入门到实战：解锁应用性能的终极武器

引言 在Android应用开发领域&#xff0c;Java和Kotlin凭借其简洁的语法和强大的框架支持&#xff0c;成为了绝大多数开发者的首选。然而&#xff0c;当面对高性能计算、游戏引擎集成、硬件加速访问或核心算法保护等场景时&#xff0c;纯Java层的实现往往显得力不从心。这时&…...

编程新知 2026/3/27 4:48:02

20个网站备份泄漏漏洞挖掘技巧！

20个网站备份泄漏漏洞挖掘技巧&#xff01; 网站备份文件泄露&#xff0c;绝不是小问题。在网络安全攻防实战中&#xff0c;备份文件泄露一直被列为“高风险漏洞”&#xff0c;却往往被企业开发者所忽视。一次偶然的备份文件泄露&#xff0c;可能成为整个系统沦陷的起点。本文…...

编程新知 2026/3/27 3:15:02

C#频谱图振动传感器温度传感器数据采集绘制频谱图和时域图，并存储数据库存储时间200ms左右

C#频谱图振动传感器温度传感器数据采集绘制频谱图和时域图&#xff0c;并存储数据库存储时间200ms左右&#xff0c;可以进行历史频谱图和时域图回放&#xff0c;可以求的最大值并设置阈值报警可以导出报警最近在搞工业设备监控系统的时候&#xff0c;需要实时采集振动和温度数据…...

编程新知 2026/3/27 2:58:57

实战演练：基于快马平台快速构建一个电商场景的智能客服AI Agent

实战演练&#xff1a;基于快马平台快速构建一个电商场景的智能客服AI Agent 最近在做一个电商项目&#xff0c;需要给平台增加智能客服功能。传统开发流程要写大量业务逻辑代码&#xff0c;还要处理前后端对接&#xff0c;想想就头大。后来发现用InsCode(快马)平台可以快速实现…...

编程新知 2026/3/27 1:32:21

5分钟搞定ollama+qwen2.5模型配置：从下载到对话测试全流程指南

5分钟极速部署ollama与qwen2.5&#xff1a;零基础打造本地AI对话系统 在AI技术平民化的今天&#xff0c;拥有一个本地运行的对话模型不再是专业开发者的专利。本文将带您用最短时间完成ollama服务部署与qwen2.5模型配置&#xff0c;无需复杂环境搭建&#xff0c;从零开始构建属…...

编程新知 2026/3/27 1:01:40

FireRedASR-AED-L在Windows系统的部署问题解决方案

FireRedASR-AED-L在Windows系统的部署问题解决方案 1. 引言 如果你正在Windows系统上尝试部署FireRedASR-AED-L这个强大的语音识别模型&#xff0c;可能会遇到各种让人头疼的问题。环境配置、依赖冲突、GPU兼容性——这些都是Windows环境下部署深度学习模型时常见的拦路虎。 …...

编程新知 2026/3/27 0:15:26

JAVA重点基础、进阶知识及易错点总结（1）---数据类型、运算符、流程控制

&#x1f680; Java 巩固进阶 第1天 主题&#xff1a;数据类型、运算符与流程控制 —— 避开那些“隐形”的坑&#x1f4c5; 进度概览&#xff1a;重启Java基础。 &#x1f4a1; 核心价值&#xff1a;很多生产环境的Bug&#xff08;如金额精度丢失、空指针崩溃、逻辑穿透&…...

编程新知 2026/3/26 22:40:21

# 发散创新：基于群体智能的Python蚁群算法优化路径规划实战在人工智能快速演进的时代，**群体智能（Swarm Int

发散创新&#xff1a;基于群体智能的Python蚁群算法优化路径规划实战 在人工智能快速演进的时代&#xff0c;群体智能&#xff08;Swarm Intelligence&#xff09; 作为一类受自然界生物行为启发的计算范式&#xff0c;正逐渐成为解决复杂优化问题的重要工具。本文聚焦于蚁群算…...

编程新知 2026/3/26 22:12:06