vue-cli3项目优化
首先添加两个量化的插件,方便对项目目前的情况进行分析:
1.添加speed-measure-webpack-plugin插件 —量化的指标可以看出前后对比

使用步骤:
- 安装speed-measure-webpack-plugin依赖
npm install speed-measure-webpack-plugin -D
- 配置vue.config.js 文件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");configureWebpack:{plugins: [//开启打包计时new SpeedMeasurePlugin()]
2.添加webpack-bundle-analyzer,分析项目打包后文件的占比

使用步骤:
- webpack-bundle-analyzer的安装
npm install -D webpack-bundle-analyzer
- 配置vue.config.js文件
module.exports = {chainWebpack: (config) => {if (process.env.ANALAYZ) { config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin); }},
};
- 在package.json文件汇总添加analyz分析命令
"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","analyz": "cross-env ANALAYZ=true vue-cli-service build"
},
- 执行analyz分析命令
npm run analyz
接下来根据上面插件显示的结果,进行进一步的优化:
1. 添加HappyPack
原理: 由于有大量文件需要解析和处理,构建是文件读写和计算密集型的操作,特别是当文件数量变多后,Webpack 构建慢的问题会显得严重。文件读写和计算操作是无法避免的,那能不能让 Webpack 同一时刻处理多个任务,发挥多核 CPU 电脑的威力,以提升构建速度呢?
HappyPack 就能让 Webpack 做到这点,它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。
使用步骤:
- 安装 happypack:
npm install happypack -D
- 配置vue.config.js文件
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });configureWebpack:{plugins: [//开启HappyPacknew HappyPack({id:'babel',loaders:['babel-loader?cacheDirectory=true'],threadPool:happyThreadPool}),}chainWebpack(config) {//开启happypackconst jsRule = config.module.rule('js');jsRule.uses.clear();jsRule.use('happypack/loader?id=babel').loader('happypack/loader?id=babel').end();······}
2.开启noParse
**原理:**如果一些第三方模块没有AMD/CommonJS规范版本,可以使用 noParse 来标识这个模块,这样 Webpack 会引入这些模块,但是不进行转化和解析,从而提升 Webpack 的构建性能 ,例如:jquery 、lodash。
noParse 属性的值是一个正则表达式或者是一个 function。
使用步骤:
1.配置 vue.config.js文件
configureWebpack:{module: {noParse: /^(lodash|moment)$/},}
3.添加DllPlugin
**原理:**有些时候,如果所有的JS文件都打成一个JS文件,会导致最终生成的JS文件很大,这个时候,我们就要考虑拆分 bundles。
DllPlugin 和 DLLReferencePlugin 可以实现拆分 bundles,并且可以大大提升构建速度,DllPlugin 和 DLLReferencePlugin 都是 webpack 的内置模块。
我们使用 DllPlugin 将不会频繁更新的库进行编译,当这些依赖的版本没有变化时,就不需要重新编译。我们新建一个 webpack 的配置文件,来专门用于编译动态链接库。
使用步骤:
- 安装相关插件
npm install webpack-cli@^3.2.3 add-asset-html-webpack-plugin@^3.1.3 clean-webpack-plugin@^1.0.1 --dev
- 新建文件webpack.dll.conf.js
const path = require('path')
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin')// dll文件存放的目录
const dllPath = 'public/vendor'module.exports = {entry: {// 需要提取的库文件vue: ["vue", "vue-router", "vuex"],plugin: ['echarts','echarts-gl'],ui: ['topology-vue','element-ui'],},output: {path: path.join(__dirname, dllPath),filename: '[name].dll.js',// vendor.dll.js中暴露出的全局变量名// 保持与 webpack.DllPlugin 中名称一致library: '[name]_[hash]'},plugins: [// 清除之前的dll文件new CleanWebpackPlugin(),// 设置环境变量new webpack.DefinePlugin({'process.env': {NODE_ENV: 'production'}}),// manifest.json 描述动态链接库包含了哪些内容new webpack.DllPlugin({path: path.join(__dirname, dllPath, '[name]-manifest.json'),// 保持与 output.library 中名称一致name: '[name]_[hash]',context: process.cwd()})]
}
- package.json新增一条命令,要安装webpack-cli
"scripts": {"dll": "webpack -p --progress --config ./webpack.dll.conf.js"}
- 执行 npm run dll, 会在public中生成vender文件夹
npm run dll
- 配置vue.config.js文件
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');configureWebpack:{//开启dllnew webpack.DllReferencePlugin({context: process.cwd(),manifest: require('./public/vendor/vendor-manifest.json')}),
- public 下的index.html引入一下文件
<!-- dll 文件 --><script src="./vendor/vendor.dll.js"></script>
4.添加gzip
原理: GZIP压缩可以大幅减小打包后文件的体积。
使用步骤:
- 安装插件
npm install compression-webpack-plugin -D
- 配置vue.config.js文件
configureWebpack:{plugins: [//开启gzipnew CompressionPlugin({test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型threshold: 10240, // 归档需要进行压缩的文件大小最小值,我这个是10K以上的进行压缩deleteOriginalAssets: false // 是否删除原文件--会报错}),
- 在nginx中启用gzip压缩
# 开启gzip
gzip on;
# 设置缓冲区大小
gzip_buffers 4 16k;
#压缩级别官网建议是6
gzip_comp_level 6;
#压缩的类型
gzip_types image/svg+xml text/plain text/html text/xml text/css text/javascript application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/x-font-ttf application/vnd.ms-fontobject font/opentype font/ttf font/eot font/otf;
#允许压缩的文件最小字节
gzip_min_length 10k;
经过了以上的优化:
- 项目打包速度缩短了300%

2.运行速度也有所提升:

相关文章:
vue-cli3项目优化
首先添加两个量化的插件,方便对项目目前的情况进行分析: 1.添加speed-measure-webpack-plugin插件 —量化的指标可以看出前后对比 使用步骤: 安装speed-measure-webpack-plugin依赖 npm install speed-measure-webpack-plugin -D配置vue.c…...
Windows环境下VSCode安装PlatformIO Cero报错ERROR: HTTP error 403 while getting
安装PlatformIO插件成功,初始化失败 错误信息判断问题尝试访问https://pypi.tuna.tsinghua.edu.cn/simple/platformio/成功点击文件后报错如下: 解决问题- 换源 ( Windows下有两个地方需要更改)cmd命令行Pip文件 总结:…...
git bash 安装sdkadmin
1.下载相关安装包,复制到git 安装目录 D:\software\Git\mingw64\bin 2. 运行 curl -s "https://get.sdkman.io" | bash...
如何在IEEE论文中添加伪代码pseudocode
前言 记录写论文过程中需要重复用的一些小技巧: 一、如何在IEEE论文中添加伪代码pseudocode pseudocode是经常需要在论文中使用的流程图,掌握如何写伪代码图是必须得。 1.引入库 代码如下(示例): # 头部添加不可少的…...
【css】css隐藏元素
display:none:可以隐藏元素。该元素将被隐藏,并且页面将显示为好像该元素不在其中。visibility:hidden: 可以隐藏元素。但是,该元素仍将占用与之前相同的空间。元素将被隐藏,但仍会影响布局。 代码: <!…...
JUC并发编程(二)ForkJoinPool、Future、CompletableFuture、CAS
文章目录 ForkJoin分治工作窃取ForkJoinPool与ThreadPoolExecutor使用案例不带返回值的计算--RecursiveAction带返回值的计算--RecursiveTask Future 异步回调烧水案例join实现FutureTask实现 CompletableFuture为什么叫CompletableFuture?创建异步任务supplyAsyncrunAsync获取…...
大数据课程F2——HIve的安装操作
文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 了解HIve的安装概念; ⚪ 掌握HIve安装步骤和Linux常用命令; ⚪ 掌握HIve安装的连接池jar包冲突和日志打印jar包冲突; ⚪ 掌握HIve安装的Hadoop安装配置; ⚪ 掌握HIve安装的JDK安装配…...
华为云hcip核心知识笔记(存储服务规划)
云上存储 : 云硬盘:基于分布式架构,可弹性扩展的虚拟块存储服务 注意事项 挂载云硬盘实例和云硬盘必须在同一区域,否则挂载失败文件存储服务:完全托管的共享文件存储 可以为多个实例实现共享访问,不同vpc中可以进行对…...
四、JVM-对象内存模型
Java对象内存模型 一个Java对象在内存中包括3个部分:对象头、实例数据和对齐填充 数据 内存 – CPU 寄存器 -127 补码 10000001 - 11111111 32位的处理器 一次能够去处理32个二进制位 4字节的数据 64位操作系统 8字节 2的64次方的寻址空间 指针压缩技术 JDK1.6出…...
2023-08-05 LeetCode每日一题(合并两个有序链表)
2023-08-05每日一题 一、题目编号 21. 合并两个有序链表二、题目链接 点击跳转到题目位置 三、题目描述 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例1: 示例2: 示例3: …...
【每天40分钟,我们一起用50天刷完 (剑指Offer)】第四十七天 47/50
专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客,如有问题交流,欢迎评论区留言,一定尽快回复!(大家可以去看我的专栏,是所有文章的目录) 文章字体风格: 红色文字表示&#…...
离散型制造业生产管理云MES系统解决方案
典型的离散制造业主要包括机械、电子、航空、汽车等行业,这些企业既有按订单生产,也有按库存生产,既有批量生产,也有单件小批生产。那么,注重生产计划的制定,生产的快速响应是离散行业MES系统应用的关键。 …...
【Vue】全家桶介绍
文章目录 概述核心Vue.Js浏览器开发插件vue-devtools项目构建工具:vue-cli路由管理器 : vue-Router状态管理模式:vuex网络请求库:AxiosUI框架: iview、vant、elementUI打包工具: webpack来源 概述 Vue全家…...
【雕爷学编程】MicroPython动手做(33)——物联网之天气预报2
天气(自然现象) 是指某一个地区距离地表较近的大气层在短时间内的具体状态。而天气现象则是指发生在大气中的各种自然现象,即某瞬时内大气中各种气象要素(如气温、气压、湿度、风、云、雾、雨、闪、雪、霜、雷、雹、霾等ÿ…...
macOS 虚拟桌面黑屏(转)
转自:macOS重置虚拟桌面、macOS 虚拟桌面黑屏 有几次出现如图的情况,以为是iTerm的问题,但是在关闭软件,重启之后,依旧无效。 后面经过网友告知,才知道是虚拟桌面的问题。 为了清理这个问题,有以…...
查看gz文件 linux zcat file.gz mtx.gz
可以使用以下命令来查看 gz 压缩文件的内容: zcat file.gz 1 该命令会将 file.gz 文件解压并输出到标准输出,可以通过管道符将其与 grep 命令结合使用来查找需要的关键词,例如: zcat file.gz | grep keyword 1 该命令会将 file.gz…...
互联网——根服务器
说明 根服务器是互联网域名系统(DNS)中最高级别的服务器之一。它们负责管理整个DNS系统的顶级域名空间,例如.com、.org和.net等。 根服务器的主要功能是将用户的DNS查询转发到适当的顶级域名服务器。当用户在浏览器中输入一个域名ÿ…...
华为OD机试之报文回路(Java源码)
题目描述 IGMP 协议中响应报文和查询报文,是维系组播通路的两个重要报文,在一条已经建立的组播通路中两个相邻的 HOST 和 ROUTER,ROUTER 会给 HOST 发送查询报文,HOST 收到查询报文后给 ROUTER 回复一个响应报文,以维持…...
林大数据结构【2019】
关键字: 哈夫曼树权值最小、哈夫曼编码、邻接矩阵时间复杂度、二叉树后序遍历、二叉排序树最差时间复杂度、非连通无向图顶点数(完全图)、带双亲的孩子链表、平衡二叉树调整、AOE网关键路径 一、判断 二、单选 三、填空 四、应用题...
2023华数杯数学建模A题思路分析 - 隔热材料的结构优化控制研究
# 1 赛题 A 题 隔热材料的结构优化控制研究 新型隔热材料 A 具有优良的隔热特性,在航天、军工、石化、建筑、交通等 高科技领域中有着广泛的应用。 目前,由单根隔热材料 A 纤维编织成的织物,其热导率可以直接测出;但是 单根隔热…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...
Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)
引言 在人工智能飞速发展的今天,大语言模型(Large Language Models, LLMs)已成为技术领域的焦点。从智能写作到代码生成,LLM 的应用场景不断扩展,深刻改变了我们的工作和生活方式。然而,理解这些模型的内部…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的:a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...
渗透实战PortSwigger靶场:lab13存储型DOM XSS详解
进来是需要留言的,先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码,输入的<>当成字符串处理回显到页面中,看来只是把用户输…...
