VUE 项目如何快速优化?| 原力计划
nanshan 2024-10-25 13:05 19 浏览 0 评论
作者 | 靖凡无所畏惧
责编 | 屠敏
出品 | CSDN 博客
前言
相信现在很多人都是用Vue做过了各种项目，但是项目代码做完和上线并不代表这结束，还有上线以后的优化也是很重要的一点，这次的博客就来给大家说一下如何优化一下Vue的项目，让你的项目打包和运行速度更上一个台阶。
优化策略
生成打包报告
修改webpack默认配置
加载外部CDN资源
路由懒加载
开启gizp配置
生成打包报告
生成Vue的打包报告目的在于让我们先大概的了解到当前项目生成的各个文件的大小，让我们心里有数，知道哪里需要优化。
通过命令行参数形式生成报告：
//通过 vue-cli的命令选项可以生成打包报告
// --report 选项可以生成 report.html 用以分析包内容
vue-cli-service build --report通过可视化面板直接查看报告：
可以在UI面板中，通过控制台和分析面板，可以方便的查看项目中所存在的问题。
上边图片中标注的就是我们需要注意的，依赖项很多，导致打的包最终体积非常的大，相信这项目如果上线那么前端会先请求这个无比巨大的js文件，估计甲方爸爸会锤死前端人员。
通过 vue.config.js修改webpack的默认配置
通过vue-cli 3,0 工具生成的项目，默认隐藏了所有的 webpack配置项，目的是为了屏幕项目的配置过程，让程序员的工作重心放到具体的功能和逻辑的实现上。
如果程序员有修改 webpack默认配置的需求，可以在项目根目录中 按需创建vue.config.js这个配置文件，从而对项目的打包发布过程做自定义配置，具体可以参考 https://cli.vuejs.org/zh/config/#vue-config-js
为开发模式和发布模式指定不同的打包入口：
默认情况下，Vue项目的开发模式和发布模式公用一个入口文件(src/main.js)，为了将项目的开发过程与发布过程分离，我们可以设置两种模式，各自指定打包入口文件。
开发模式入口文件：src/main-dev.js
发布模式入口文件：src/main-prod.js
通过chainWebpack自定义打包入口：
module.exports = {
lintOnSave: false,
chainWebpack:config=>{
//生产环境
config.when(process.env.NODE_ENV === 'production',config=>{
//注意main-prod.js是已经存在的文件
config.entry('app').clear.add('./src/main-prod.js')
})
//开发环境
config.when(process.env.NODE_ENV === 'development',config=>{
//注意main-dev.js是已经存在的文件
config.entry('app').clear.add('./src/main-dev.js')
})
}
}
因为开发生产环境不同，所以在main.js文件中内容就可能不同，为了解决耦合，我们就把main.js 重新划分成了两个文件 分别是main-dev.js 和 main-prod.js
通过externals加载外部CDN资源:
默认情况下，通过import语法导入的第三方依赖包，最终会打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。
vue.config.js的配置externals节点：
module.exports = {
lintOnSave: false,
chainWebpack:config=>{
//生产环境
config.when(process.env.NODE_ENV === 'production',config=>{
config.entry('app').clear.add('./src/main-prod.js')
config.set('externals',{
vue:'Vue',
'vue-router':'VueRouter',
axios:'axios',
lodash:'_',
echarts:'echarts',
nprogress:'NProgress',
'vue-quill-editor':'VueQuillEditor'
})
})
//开发环境
config.when(process.env.NODE_ENV === 'development',config=>{
config.entry('app').clear.add('./src/main-dev.js')
})
}
}通过设置externals这个节点，指定哪些包直接去window上去查找使用，而不会将这些指定的包再次打包起来，这样就可以减小最终生成的js的文件体积。
去除main.js中引入的第三方包的样式表：
将这些样式表也统统的从main.js文件中去除，统一由CDN进行引入。
在public/index.html中添加 css和js的CDN地址：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本编辑器 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.1.6/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>我们通过CDN去引用css样式的话，我们项目生成的包中就不会存在这些css文件，可以减小项目的体积，并且，我们还将 指定的js文件也通过CDN的方式来引用，这样这些js就会注册到windows全局中，这样就对应到了vue.config.js配置externals节点的内容了。
引入CDN效果对比：
未使用CDN：
使用CDN后：
甲方爸爸打人的力度轻了许多。
路由懒加载
当项目打包构建的时候，js包会变得非常巨大，影响页面加载，如果我们能够把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。
安装@bable/plugin-syntax-dynamic-import包
在babel.config.js配置文件中声明该插件
将路由改为按需加载的形式：
const Login = => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
const Home = => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
const Welcome = => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')其中webpackChunkName 指定了 打包的文件名字，让 Login.vue 、Home.vue 、 Welcome.vue 统一打到 指定的包中。
开启gizp配置：
这一项应该由后端小哥来做，使用gizp可以减少文件体积，使得传输速度更快，我们就拿Express来展示一下如何去做。
//安装相应的包
npm install compression -D
//导入包
const compression = require('compression')
//启用中间件
app.use(compression)这样我们请求包的体积就会变得更小，有助于提升我们项目运行的速度。
最终效果展示
最终在我们经过上述一系列的操作以后，我们最终生产环境打出来的包体积只有356.2KB，这样我们项目在上线以后，就可以减轻首页假死的问题，同时因为请求的文件小了很多，所以运行速度也会加快，大家赶快去优化一下自己的项目吧。
版权声明：本文为CSDN博主「靖凡无所畏惧」的原创文章，遵循CC 4.0 BY-SA版权协议。原文：https://blog.csdn.net/wjf1997/article/details/106248699
相关推荐
- 0722-6.2.0-如何在RedHat7.2使用rpm安装CDH(无CM)
-
文档编写目的在前面的文档中，介绍了在有CM和无CM两种情况下使用rpm方式安装CDH5.10.0，本文档将介绍如何在无CM的情况下使用rpm方式安装CDH6.2.0，与之前安装C5进行对比。环境介绍：...
- ARM64 平台基于 openEuler + iSula 环境部署 Kubernetes
-
为什么要在arm64平台上部署Kubernetes，而且还是鲲鹏920的架构。说来话长。。。此处省略5000字。介绍下系统信息；o架构：鲲鹏920(Kunpeng920)oOS：ope...
- 生产环境starrocks 3.1存算一体集群部署
-
集群规划FE：节点主要负责元数据管理、客户端连接管理、查询计划和查询调度。>3节点。BE:节点负责数据存储和SQL执行。>3节点。CN:无存储功能能的BE。环境准备CPU检查JDK...
- 在CentOS上添加swap虚拟内存并设置优先级
-
现如今很多云服务器都会自己配置好虚拟内存，当然也有很多没有配置虚拟内存的，虚拟内存可以让我们的低配服务器使用更多的内存，可以减少很多硬件成本，比如我们运行很多服务的时候，内存常常会满，当配置了虚拟内存...
- 国产深度(deepin)操作系统优化指南
-
1.升级内核随着deepin版本的更新，会自动升级系统内核，但是我们依旧可以通过命令行手动升级内核，以获取更好的性能和更多的硬件支持。具体操作：-添加PPAs使用以下命令添加PPAs：```...
- postgresql-15.4 多节点主从(读写分离)
-
1、下载软件[root@TX-CN-PostgreSQL01-252software]#wgethttps://ftp.postgresql.org/pub/source/v15.4/postg...
- Docker 容器 Java 服务内存与 GC 优化实施方案
-
一、设置Docker容器内存限制（生产环境建议）1.查看宿主机可用内存bashfree-h#示例输出（假设宿主机剩余16GB可用内存）#Mem:64G...
- 虚拟内存设置、解决linux内存不够问题
-
虚拟内存设置（解决linux内存不够情况）背景介绍 Memory指机器物理内存，读写速度低于CPU一个量级，但是高于磁盘不止一个量级。所以，程序和数据如果在内存的话，会有非常快的读写速度。但是，内存...
- Elasticsearch性能调优(5):服务器配置选择
-
在选择elasticsearch服务器时，要尽可能地选择与当前业务量相匹配的服务器。如果服务器配置太低，则意味着需要更多的节点来满足需求，一个集群的节点太多时会增加集群管理的成本。如果服务器配置太高，...
- Es如何落地
-
一、配置准备节点类型CPU内存硬盘网络机器数操作系统data节点16C64G2000G本地SSD所有es同一可用区3(ecs)Centos7master节点2C8G200G云SSD所有es同一可用区...
- 针对Linux内存管理知识学习总结
-
现在的服务器大部分都是运行在Linux上面的，所以，作为一个程序员有必要简单地了解一下系统是如何运行的。对于内存部分需要知道：地址映射内存管理的方式缺页异常先来看一些基本的知识，在进程看来，内存分为内...
- MySQL进阶之性能优化
-
概述MySQL的性能优化，包括了服务器硬件优化、操作系统的优化、MySQL数据库配置优化、数据库表设计的优化、SQL语句优化等5个方面的优化。在进行优化之前，需要先掌握性能分析的思路和方法，找出问题，...
- Linux Cgroups(Control Groups)原理
-
LinuxCgroups（ControlGroups）是内核提供的资源分配、限制和监控机制，通过层级化进程分组实现资源的精细化控制。以下从核心原理、操作示例和版本演进三方面详细分析：一、核心原理与...
- linux 常用性能优化参数及理解
-
1.优化内核相关参数配置文件/etc/sysctl.conf配置方法直接将参数添加进文件每条一行.sysctl-a可以查看默认配置sysctl-p执行并检测是否有错误例如设置错了参数:[roo...
- 如何在 Linux 中使用 Sysctl 命令?
-
sysctl是一个用于配置和查询Linux内核参数的命令行工具。它通过与/proc/sys虚拟文件系统交互，允许用户在运行时动态修改内核参数。这些参数控制着系统的各种行为，包括网络设置、文件...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- linux 查询端口号 (58)
- docker映射容器目录到宿主机 (66)
- 杀端口 (60)
- yum更换阿里源 (62)
- internet explorer 增强的安全配置已启用 (65)
- linux自动挂载 (56)
- 禁用selinux (55)
- sysv-rc-conf (69)
- ubuntu防火墙状态查看 (64)
- windows server 2022激活密钥 (56)
- 无法与服务器建立安全连接是什么意思 (74)
- 443/80端口被占用怎么解决 (56)
- ping无法访问目标主机怎么解决 (58)
- fdatasync (59)
- 405 not allowed (56)
- 免备案虚拟主机zxhost (55)
- linux根据pid查看进程 (60)
- dhcp工具 (62)
- mysql 1045 (57)
- 宝塔远程工具 (56)
- ssh服务器拒绝了密码 请再试一次 (56)
- ubuntu卸载docker (56)
- linux查看nginx状态 (63)
- tomcat 乱码 (76)
- 2008r2激活序列号 (65)