百度360必应搜狗淘宝本站头条
tomcat 乱码无法与服务器建立安全连接是什么意思sysv-rc-confdocker映射容器目录到宿主机internet explorer 增强的安全配置已启用
当前位置：网站首页 > 技术文章 > 正文

VUE 项目如何快速优化?| 原力计划

nanshan 2024-10-25 13:05 15 浏览 0 评论

作者 | 靖凡无所畏惧

责编 | 屠敏

出品 | CSDN 博客

前言

相信现在很多人都是用Vue做过了各种项目，但是项目代码做完和上线并不代表这结束，还有上线以后的优化也是很重要的一点，这次的博客就来给大家说一下如何优化一下Vue的项目，让你的项目打包和运行速度更上一个台阶。

优化策略

  1. 生成打包报告

  2. 修改webpack默认配置

  3. 加载外部CDN资源

  4. 路由懒加载

  5. 开启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)，为了将项目的开发过程与发布过程分离，我们可以设置两种模式，各自指定打包入口文件。

  1. 开发模式入口文件：src/main-dev.js

  2. 发布模式入口文件：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包会变得非常巨大，影响页面加载，如果我们能够把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。

  1. 安装@bable/plugin-syntax-dynamic-import包

  2. 在babel.config.js配置文件中声明该插件

  3. 将路由改为按需加载的形式：

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

相关推荐

教你一个解决手机卡顿的方法（10秒解决手机卡顿问题）

我们的手机天天刷头条，看视频，用了一阶段时间以后，就时不时的发生卡顿现象。昨天我的手机就发现了这个问题。友友们，你们遇到过这样的问题吗？你们都是怎样解决的？我看了一眼我的粉丝情况，头条君给我分析的很精...

手机视频缓存清理，3步彻底清空，告别卡顿

在我们使用手机观看视频的过程中，经常会产生大量的缓存垃圾，这些垃圾文件不仅占用了手机的存储空间，还可能导致手机卡顿和运行缓慢。然而，你知道如何彻底清空手机的视频缓存，让手机恢复流畅的使用体验吗？在本文...

关手机这个开关，轻松提升流畅度!

关闭手机这个开关，跟新买的一样流畅。手机不要再清理垃圾了，只要关闭这个开关，手机就会和新买的差不多，丝滑流畅不卡顿。其实抖音里就隐藏着一个小开关，每天刷过的视频都会保存在手机里，如果一直不清理，手机就...

如何清理今日头条和西瓜视频的内存，让手机流畅不卡顿?

对于老年人而言，今日头条和西瓜视频能带来丰富的资讯与娱乐。然而，随着使用时间的增加，这些应用会占用大量手机内存，致使手机运行卡顿。那该如何解决呢？接下来，我将用最简单易懂的方式教老年人清理今日头条和西...

视频在线如何转换格式?好用不卡顿的三种转换办法

转换视频格式目前来说已经是很熟练的操作了，但是还有些用户可能还是不知道，小编今天就特意给大家带来一些小众才知道的转换教程，让新手也能快速的上手去转换视频格式，以后获取到视频就不怕内容丢失了，视频的格式...

如何把视频慢放处理?这几个慢放方法记得收藏

如何把视频慢放处理？如果你想让视频慢放，可能是因为你想放慢一些精彩的瞬间，或者你想制作一个慢动作视频。在这篇文章中，我们将介绍一些调速方法，这些方法可以有效地调整视频速度，一起来学习一下吧。方法一：使...

如何清理看过的视频，释放垃圾，让手机更流畅?

现在谁的手机上没几个短视频平台，无聊时就会刷别人的视频。可您知道吗？我们看过的内容都会被自动保存在手机里，而且很耗内存。如果长时间不释放，手机就会出现各种问题，其中最突出的就是反应慢。相信很多老年人的...

手机掉帧是怎么回事?刷视频的时候经常掉帧卡顿

手机掉帧是指在运行应用或视频时，画面出现卡顿、不流畅的现象，通常由硬件性能不足、软件优化不佳、内存占用过高、网络问题或设备过热等因素引起。尤其是在刷视频时，掉帧问题可能更为明显，以下是具体原因及解决方...

拍视频画面卡顿不流畅，原来是相机设置错误 #短视频拍摄

拍摄视频时，应该选择哪种快门速度？许多新手朋友可能会认为，快门速度越高，画面就越清晰，实则不然。因为拍摄视频时，需要考虑一个问题，即动态模糊。例如，如果设置为24帧/秒，那么每秒钟会拍摄24张图片。如...

手机卡顿最大原因#视频太卡怎么变流畅

抖音这几个开关是手机卡顿的最大原因。你是不是也会经常遇到刷视频的时候，打开一个视频之后老半天还在那转着圈圈，总觉得手机没有之前流畅了。这就说明你的手机占用的内存太多了，导致手机卡顿，使用不流畅。使用手...

为啥你家的玩游戏和刷视频经常性的会卡，那是你不懂这些小妙招

本内容来源于@什么值得买APP，观点仅代表作者本人｜作者：暴走的黄小猪说到网速有不少的值友都有一个共同点，那就是“卡”，那是你根本没体验过啥叫真正的网速啊，全屋零四条网络报表也花不了几个钱你们的方法...

电脑看视频卡顿有什么解决方法?（电脑看视频画面卡顿是什么原因）

电脑看视频卡顿的原因可能多种多样，包括硬件性能不足、网络问题、软件设置不当等。以下是一些常见的解决方法，帮助你改善视频播放的流畅度：一、硬件方面1.检查硬件性能：如果电脑配置较低，尤其是CPU、内存或...

手机Wi-Fi满格但视频卡顿，你需要这样解决

累了一天的打工人回家拿出手机准备玩玩游戏，看看电影时，发现网络异常卡顿，但手机又显示Wi-Fi信号满格，当咱们遇到此类问题时，这些动作能让网络恢复正常，方法如下。一、重启路由器和光猫很多家庭在安装好路...

视频越刷越卡?原来是路由器开启了这个功能，关闭方法来了

应该很多小伙伴都有过类似的经历，就是在家里长时间刷视频或者看剧的时候，网速好像会越来越慢，视频总是要加载。手机本身可能是一部分原因，但路由器也会影响，你知道吗？当我们在刷视频的，路由器会悄悄地开启大量...

一招解决视频卡顿的问题，改变发布渠道后，结果香了

最近一段时间拍了很多美景视频，编辑发布到头条后，有时一直显示在缓冲，播放不了，有时打开断断续续的，老是卡顿。导致的后果是：要么展现量很低，要么阅读量寥寥无几，这让我非常苦恼。所以再发布作品时，我只好文...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表