VUE项目实战62项目优化上线准备+生成项目报告

Posted 2022-11-23 光仔December

接上篇《61、添加页面加载进度条效果》
上一篇我们完成了为项目添加加载进度条的效果，整个项目算是基本开发完毕了，本篇我们来开始学习项目的优化以及上线工作。

一、学习目标

我们的VUE项目开发完毕之后，就需要考虑如何优化项目，以及将项目部署上线，供外界用户进行使用。所以我们的学习目标为：
◆能够优化Vue项目
◆能够部署Vue项目
学习内容为：
◆项目优化：如何对Vue项目进行优化；
◆项目上线：如何将优化完毕后的Vue项目部署上线。

二、项目优化

1、项目优化策略
（1）生成打包报告：通过项目生成一个打包的报告，根据报告发现项目存在的问题，可以进行相应的解决。
（2）第三方库启用CDN：为第三方库开启CDN（内容分发网络，是一种分布式网络）加载，会提高项目首页的加载效率。
（3）Element-UI组件按需加载。
（4）路由懒加载：因为Webpack打包后的文件会很大，造成进入首页时需要加载的内容过多，时间过长，会出现长时间白屏。运用懒加载可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的压力，减少首页加载时间。
（5）首页内容定制：优化App.vue，自定义首页的样式。

以上就是我们本次项目优化的策略。我们先一个个来，首先我们来生成项目打包报告。

三、生成打包报告

打包时，为了直观地发现项目中存在地问题，可以在打包时生成报告。生成报告的方式有两种：
1、通过命令行参数的形式生成报告

//通过 vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成 report.html以帮助分析包内容
vue-cli-service build --report

即我们手动来敲打包命令，并在打包命令后面跟一个“--report”选项参数，就会在打包后生成一个报告文件“report.html”，双击这个html文件就能看到打包过程中得情况和问题。

2、通过可视化的UI面板直接查看报告（推荐）
我们可以通过“vue ui”打开vue的可视化面板，在UI面板中，通过控制台和分析面板，可以方便的查看到项目中所存在地问题：

我们可以通过【任务】-【build】编译并压缩模块，点击运行来编译打包该项目，同时最后会生成一个项目报告，我们在【仪表盘】中可以看到：

通过状态总览可以看到编译的状态，以及错误、警告，包括项目资源的大小，其中依赖的占比；

通过速度统计，可以看到我们项目在不同网络状态下的访问速度；

通过资源面板，我们可以看到比较大体积的文件排行，包括其访问速度。
通过依赖项面板，我们看到所有依赖项所占体积的排行。
通过项目报告我们可以看出一下问题：
（1）依赖项占整个项目得体积太大
整个项目2.3MB，而光依赖项就有2.2MB，占比92.97%，这是我们需要优化的点，需要将依赖项缩小一些容量。
（2）项目的打开速度比较慢
上面速度统计面板中我们可以看到，项目打开的平均速度为2.68秒，还是比较慢的，起码要在1秒左右或者更块；
（3）项目部分文件过大，打开比较费资源
上面资源面板中我们可以看到第一个已经标了叹号，“js/chunk-vendors.867b03ab.js”这个文件自己就有1.9M，并且访问速度平均1.88秒；太大的资源文件会在加载网页的时候出现“假死”的现象，所以我们也要优化掉；
（4）项目部分非核心依赖所占体积过大
我们通过依赖项面板可以看出部分依赖项目（例如echart、富文本编辑器quill）所占容量比较大。

而在【分析】中我们可以看到具体的包资源的容量占比情况：

这里会将我们所有打的资源包进行分析，块的大小即为该组件打包后的体积大小，越大的资源所占容量越多。这里也可以看出部分依赖所占体积过大。

四、修改webpack的默认配置准备

我们通过vue.config.js修改webpack的默认配置。
通过vue-cli 3.0工具生成的项目，默认隐藏了所有webpack的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心放到具体功能和业务逻辑的实现上。
我们可以看看我们的项目目录，是没有任何webpack配置文件的：

其实webpack配置文件是被vue-cli隐藏了。如果我们就像对项目得webpack进行自定义配置，我们就需要在项目的根目录中，按需创建vue.config.js配置文件，从而对项目的打包发布过程做自定义的配置（具体配置参考http://cli.vuejs.org/zh/config/#vue-config-js）。

具体如何配置大家去参考上面的操作链接，我们这里简单说一下， 配置文件中暴露了一个配置对象“module.exports”，该对象里面就可以按照官方文档里的要求进行配置。
那么我们在项目中创建这么一个文件，里面先啥也不配置：

我们即将要往里面配置“开发和正式环境打包入口”、“加载外部CDN资源”等配置，我们下面几篇逐步来去讲解，敬请期待。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频

转载请注明出处：https://blog.csdn.net/acmman/article/details/126332629