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

vue-cli项目打包体积太大，服务器网速也拉胯(100kb/s)，客户打开网站需要等十几秒！！！ 尝试cdn优化方案

news 2026/2/9 18:50:42

一、首先用插件webpack-bundle-analyzer查看自己各个包的体积

插件用法参考之前博客

vue-cli项目中，使用webpack-bundle-analyzer进行模块分析，查看各个模块的体积，方便后期代码优化

二、发现有几个插件体积较大，有改成CDN引用的必要，先优化2个试试水

比如 echarts、element-ui、element-variables.scss、lay-excel、moment

 

第一次 npm run build 的体积是 4.29MB

 尝试优化，分为这几步

1.在vue.config.js中webpack的externals忽略打包
    externals: {vue: 'Vue','element-ui': 'Element'},
2.在 module.exports - configureWebpack 里面写

3.index.html里引入vue和element的cdn资源， index.html路径为public/index.html
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/vue/2.6.1/vue.js"></script><script src="https://cdn.bootcss.com/element-ui/2.15.12/index.js"></script>

4.注释main.js的引用

很好，成功了，但没完全成功，有坑！！

坑1：vue.config.js 的externals配置， 饿了么取名一定要是Element ：    'element-ui': 'Element'

如果是ElementUI会报错：Uncaught ReferenceError: ElementUI is not defined

坑2：CDN引入vue一定要在element-ui前面

坑3：element-ui的css 明明改成引用cdn ，element-variables怎么还那么大

排查了下 本地引用没有注释干净

@import "~element-ui/packages/theme-chalk/src/index";     这句要注释

5.再次 npm run dev 看， 很好 element-variables占用没了 体积也小了。

此时打包体积为 2.93

有点意思~

三、通过以上操作了解到CDN优化的流程，接下里搞定剩下的大体积插件

基本只要修改3个地方

1.vue.config.js 配置不打包的插件

2.index.html 引入CDN资源

3.main.js 注释本地引用

    externals: {vue: 'Vue','element-ui': 'Element',echarts: 'echarts',moment: 'moment'},
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="renderer" content="webkit"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="icon" href="<%= BASE_URL %>logo.png"><link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/vue/2.6.1/vue.js"></script><script src="https://cdn.bootcss.com/element-ui/2.15.12/index.js"></script><script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script><script src="https://cdn.staticfile.org/moment.js/2.29.4/moment.min.js"></script><title><%= webpackConfig.name %></title></head><body><div id="app"></div></body>
</html>

1.echarts注释这句

// import * as echarts from 'echarts'

2.需要注意点是 moment只需要注释 // import moment from 'moment'

因为项目中大量使用  this.$moment  ，示例：this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')，   还是要把 moment 赋值到this上

3.如果因为eslint提示  'echarts' is not defined

在上面加 // eslint-disable-next-line no-undef

4.此时打包体积 1.63MB，比开始的4.29MB少了三分之二

体积小那网站加载速度还不是飙升

完工~

相关文章：

vue-cli项目打包体积太大，服务器网速也拉胯(100kb/s)，客户打开网站需要等十几秒！！！ 尝试cdn优化方案

一、首先用插件webpack-bundle-analyzer查看自己各个包的体积 插件用法参考之前博客 vue-cli项目中&#xff0c;使用webpack-bundle-analyzer进行模块分析&#xff0c;查看各个模块的体积&#xff0c;方便后期代码优化 二、发现有几个插件体积较大&#xff0c;有改成CDN引用的…...

编程日记 2023/10/1 19:15:32

【优秀学员统计】python实现-附ChatGPT解析

1.题目 优秀学员统计 知识点排序统计编程基础 时间限制: 1s 空间限制: 256MB 限定语言:不限 题目描述: 公司某部门软件教导团正在组织新员工每日打卡学习活动，他们开展这项学习活动已经一个月了，所以想统计下这个月优秀的打卡员工。每个员工会对应一个id，每天的打卡记录记录…...

编程日记 2023/10/1 19:14:32

餐饮外卖配送小程序商城的作用是什么？

餐饮是支撑市场的主要行业之一&#xff0c;其市场规模很大&#xff0c;从业商家从大到小不计其数&#xff0c;对众商家来说&#xff0c;无论门店大小都希望不断生意增长&#xff0c;但在实际发展中却会面对不少痛点&#xff1b; 餐饮很适合线上经营&#xff0c;无论第三方外卖…...

编程日记 2023/10/1 19:13:31

【QT】使用toBase64方法将.txt文件的明文变为非明文（类似加密）

目录 0.环境 1.背景 2.详细代码 2.1 .h主要代码 2.2 .cpp主要代码&#xff0c;主要实现上述的四个方法 0.环境 windows 11 64位 Qt Creator 4.13.1 1.背景 项目需求&#xff1a;我们项目中有配置文件&#xff08;类似.txt&#xff0c;但不是这个格式&#xff0c;本文以…...

编程日记 2023/10/1 19:11:29

《QDebug 2023年9月》

一、Qt Widgets 问题交流 1.Qt 程序在 Windows 上以管理员权限运行时无法响应拖放&#xff08;Drop&#xff09; 无论是 Widget 还是 QML 程序&#xff0c;以管理员权限运行时&#xff0c;都无法响应拖放操作。可以右键管理员权限打开 Qt Creator&#xff0c;然后丢个文本文件…...

编程日记 2023/10/1 19:10:28

C++使用高斯模糊处理图像

C使用高斯模糊处理图像 cv::GaussianBlur 是 OpenCV 中用于对图像进行高斯模糊处理的函数。高斯模糊是一种常用的图像滤波方法&#xff0c;它可以减少图像中的噪声&#xff0c;并平滑图像以降低细节级别。 void cv::GaussianBlur(const cv::Mat& src, cv::Mat& dst, …...

编程日记 2023/10/1 19:09:27

多维时序 | MATLAB实现PSO-BP多变量时间序列预测(粒子群优化BP神经网络)

多维时序 | MATLAB实现PSO-BP多变量时间序列预测(粒子群优化BP神经网络) 目录 多维时序 | MATLAB实现PSO-BP多变量时间序列预测(粒子群优化BP神经网络)效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现PSO-BP粒子群优化BP神经网络多变量时间序列预测&#xff…...

编程日记 2023/10/1 19:06:24

LeetCode 283. 移动零

移动零 问题描述 LeetCode 283. 移动零 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意&#xff0c;必须在不复制数组的情况下原地对数组进行操作。 解决思路 为了将所有 0 移动到数组的末尾&#…...

编程日记 2023/10/1 19:04:22

【数据结构】选择排序 堆排序（二）

目录 一&#xff0c;选择排序 1&#xff0c;基本思想 2&#xff0c; 基本思路 3&#xff0c;思路实现 二&#xff0c;堆排序 1&#xff0c;直接选择排序的特性总结&#xff1a; 2&#xff0c;思路实现 3&#xff0c;源代码 最后祝大家国庆快乐&#xff01; 一&#xf…...

编程日记 2023/10/1 19:01:19

opencv实现目标跟踪及视频转存

创建跟踪器 def createTypeTracker(trackerType): 读取视频第一帧&#xff0c;选择跟踪的目标 读第一帧。 ok, frame video.read() 选择边界框 bbox cv2.selectROI(frame, False) 初始化跟踪器 tracker_type ‘MIL’ tracker createTypeTracker(tracker_type) 用第一…...

编程日记 2023/10/1 19:00:18

R | R及Rstudio安装、运行环境变量及RStudio配置

R | R及Rstudio安装、运行环境变量及RStudio配置 一、介绍1.1 R介绍1.2 RStudio介绍 二、R安装2.1 演示电脑系统2.2 R下载2.3 R安装2.4 R语言运行环境设置&#xff08;环境变量&#xff09;2.4.1 目的2.4.2 R-CMD测试2.4.3 设置环境变量 2.5 R安装测试 三、RStudio安装3.1 RStu…...

编程日记 2023/10/1 18:59:18

智能回答机器人的“智能”体现在哪里？

人工智能的广泛应用已经成为当今社会科技发展的趋势之一。通过人工智能技术&#xff0c;我们可以在不同领域中实现自动化、智能化和高效化&#xff0c;从而大大提升生产和生活效率。智能回答机器人的出现和使用便能很好的证明这一点。今天我们就来探讨一下智能会打机器人的“智…...

编程日记 2023/10/1 18:58:16

多网卡场景数据包接收时ip匹配规则

多网卡场景数据包接收时ip匹配规则 mac地址匹配规则 接收数据包时数据包中的目的mac地址匹配接收网卡的mac地址后&#xff0c;数据包才会继续被传递到网络层处理 ip地址匹配规则 图1&#xff1a; 参见&#xff1a;https://zhuanlan.zhihu.com/p/529160026?utm_id0 图2&am…...

编程日记 2023/10/1 18:55:13

安防视频平台EasyCVR视频调阅全屏播放显示异常是什么原因？

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…...

编程日记 2023/10/1 18:53:11

1.5.C++项目：仿muduo库实现并发服务器之socket模块的设计

项目完整版在&#xff1a; 一、socket模块&#xff1a;套接字模块 二、提供的功能 Socket模块是对套接字操作封装的一个模块&#xff0c;主要实现的socket的各项操作。 socket 模块&#xff1a;套接字的功能 创建套接字 绑定地址信息 开始监听 向服务器发起连接 获取新连接 …...

编程日记 2023/10/1 18:51:10

whisper+剪映+chatgpt实现实时语音对话功能

whisper将录音文件转成文字---chatgpt回答---剪映tts将文字转成语言。 GitHub - openai/whisper: Robust Speech Recognition via Large-Scale Weak Supervision whisper剪映chatgpt实现实时语音对话功能_哔哩哔哩_bilibili...

编程日记 2023/10/1 18:50:09

ASUS华硕ZenBook 13灵耀U 2代U3300F笔记本UX333FN/FA原装出厂Win10系统工厂安装模式

系统自带所有驱动、出厂主题壁纸、系统属性华硕专属LOGO标志、Office办公软件、MyASUS华硕电脑管家等预装程序 下载链接&#xff1a;https://pan.baidu.com/s/1dK0vMZMECPlT63Rb6-jeFg?pwdbym5 所需要工具&#xff1a;16G或以上的U盘(非必需) 文件格式&#xff1a;HDI,SWP,O…...

编程日记 2023/10/1 18:49:08

前端面试的话术集锦第 21 篇博文——高频考点（设计模式）

这是记录前端面试的话术集锦第二十一篇博文——高频考点（设计模式），我会不断更新该博文。❗❗❗ 设计模式总的来说是一个抽象的概念，前人通过无数次的实践总结出的一套写代码的方式，通过这种方式写的代码可以让别人更加容易阅读、维护以及复用。 这一章节我们将来学习几…...

编程日记 2023/10/1 18:48:07

php实战案例记录(2)生成包含字母和数字但不重复的用户名

在PHP中&#xff0c;您可以使用以下代码生成不重复的10个用户名&#xff0c;每个用户名包含英文字母和数字&#xff1a; $generatedUsernames array(); // 存储生成的用户名while (count($generatedUsernames) < 10) {$username generateUsername();if (!in_array($usern…...

编程日记 2023/10/1 18:46:05

分类预测 | Matlab实现SSA-CNN-SVM麻雀算法优化卷积支持向量机分类预测

分类预测 | Matlab实现SSA-CNN-SVM麻雀算法优化卷积支持向量机分类预测 目录 分类预测 | Matlab实现SSA-CNN-SVM麻雀算法优化卷积支持向量机分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现SSA-CNN-SVM麻雀算法优化卷积支持向量机分类预测&#xff0…...

编程日记 2023/10/1 18:45:05

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2026/1/22 21:24:01

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2026/2/4 18:09:49

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2026/2/7 4:21:44

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2026/1/30 2:33:11

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

编程新知 2026/2/1 4:23:19

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

编程新知 2026/1/31 9:25:11

数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...

编程新知 2026/2/4 20:23:50