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

接上篇《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面板中,通过控制台和分析面板,可以方便的查看到项目中所存在地问题:
【VUE项目实战】62、项目优化上线准备+生成项目报告_第1张图片

【VUE项目实战】62、项目优化上线准备+生成项目报告_第2张图片
我们可以通过【任务】-【build】编译并压缩模块,点击运行来编译打包该项目,同时最后会生成一个项目报告,我们在【仪表盘】中可以看到:
【VUE项目实战】62、项目优化上线准备+生成项目报告_第3张图片
通过状态总览可以看到编译的状态,以及错误、警告,包括项目资源的大小,其中依赖的占比;

【VUE项目实战】62、项目优化上线准备+生成项目报告_第4张图片
通过速度统计,可以看到我们项目在不同网络状态下的访问速度;

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

而在【分析】中我们可以看到具体的包资源的容量占比情况:
【VUE项目实战】62、项目优化上线准备+生成项目报告_第6张图片
这里会将我们所有打的资源包进行分析,块的大小即为该组件打包后的体积大小,越大的资源所占容量越多。这里也可以看出部分依赖所占体积过大。

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

我们通过vue.config.js修改webpack的默认配置。
通过vue-cli 3.0工具生成的项目,默认隐藏了所有webpack的配置项,目的是为了屏蔽项目的配置过程,让程序员把工作的重心放到具体功能和业务逻辑的实现上。
我们可以看看我们的项目目录,是没有任何webpack配置文件的:
【VUE项目实战】62、项目优化上线准备+生成项目报告_第7张图片
其实webpack配置文件是被vue-cli隐藏了。如果我们就像对项目得webpack进行自定义配置,我们就需要在项目的根目录中,按需创建vue.config.js配置文件,从而对项目的打包发布过程做自定义的配置(具体配置参考http://cli.vuejs.org/zh/config/#vue-config-js)。

具体如何配置大家去参考上面的操作链接,我们这里简单说一下, 配置文件中暴露了一个配置对象“module.exports”,该对象里面就可以按照官方文档里的要求进行配置。
那么我们在项目中创建这么一个文件,里面先啥也不配置:
【VUE项目实战】62、项目优化上线准备+生成项目报告_第8张图片
我们即将要往里面配置“开发和正式环境打包入口”、“加载外部CDN资源”等配置,我们下面几篇逐步来去讲解,敬请期待。


参考:黑马程序员(www.itheima.com)Vue项目实战教学视频

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

你可能感兴趣的:(vue入门与实战,vue.js,生成打包报告,--report,webpack,vue,build)