【优化】Vue项目如何优化？这篇文章就够了！超全优化方面

掘金同人账号： 🍧summer holiday,不定时发送【对标大厂的必会面试题】、【必会常用算法】、【必会高并发解决】、【优化】等专题栏目供大家学习观看

在开始之前我们介绍一个使用，这个使用大家可以先不看，直接跳到Vue打包结果的优化部分进行观看，然后再看的的途中提及再返回观看更佳

1.在Vue-Cli中自定义webpack配置

vue-cli官方文档

如果我们直接在configureWebpack中配置的话我们的配置既会在生产环境出现还会再开发环境出现，于是这肯定不是我们想要的，我们可以这么去优化配置，其实vue-cli帮我们考虑到了这一点，他在我们配置时为我们传入了一个参数生产环境开发环境

1. 在项目中新建webpack.config.js文件
   
2. 在vue.config.js中配置属性字段configureWebpack
   
3. 在webpack.config.js中判断当前环境
   
4. 在vue.config.js文件中引入我们从webpack.config.js文件中导出的环境配置
   

2.对Vue打包结果的优化

2.1分析打包结果

2.1.1分析打包结果工具的使用

因为vue2.0使用的是webpack作为打包工具，所以我们可以将自己需要的webpack的plugin或者loader加入到vue2.0打包的webpack中

具体在vue-cli中加入自定义的webpack配置我们可以参考47.在Vue-Cli中自定义webpack配置

因为可以加入自己的webpack配置所以我们可以通过webpack的包结果分析plugin：webpack-bundle-analyzer，将他加入到我们的生产环境打包结果，这样我们打包vue时就可以很直观的看出我们这个vue项目中各个模块的大小分布情况

2.1.2查看打包结果

我们大家都知道vue是一个非入侵性的web框架，因为它的非入侵性我们可以往vue这个框架中加入特别多自己习惯的能够增加开发效率的第三方JS库，于是我们的打包结果可能是这样的：

在Vue2中是没有所谓的tree-shaking优化的，所以Vue2其实在打包结果优化方面可以说是甚微的

问题1：

​ 我们可以看到我们引入的第三方库，它们占用的打包结果体积是非常庞大的，可能我们vue的代码加上我们自己的代码还没有两个第三方JS库的打包结果代码量来的多，我们这里仅仅才引用了两个非常常用的第三方JS库就已经占比打包结果这么庞大了，那我们在大型项目中，我们可想而知打包结果可能要承担巨额的第三方JS库代码量

问题2：

​ 我们大家都知道前端做JS代码兼容浏览器使用Bable就可以完成，Babel将我们ECMAScript从开始到现在基本上大部分的API和对象都模拟了一遍，于是我们可以在开发中随意使用高版本ECMAScript提供的便捷开发语法，然后Bable帮我们转化成兼容低版本浏览器的低版本JS代码，可是我们知道，低版本JS模拟高版本JS需要编写大量的JS代码来做底层代码实现，这是一个很占代码体积的工作，这导致了我们使用高版本浏览器的用户因为有的用户使用低版本浏览器所以导致代码体积过大，我们高版本浏览器用户也要加载同样巨额的JS代码

猜想1（优化公共第三方JS库打包体积）: 那么我们能不能将这些第三方JS库抽离出去呢？不加在我们的项目工程里面了，因为我们只是使用到这个第三方库的代码功能而已，我们都是要网络请求的，我们知道一个东西叫做CDN节点加速，大家可能会说CDN节点加速是要收费的，这里要提一个好东西就是我们大量常用的JS第三方库它们是有公共的CDN节点加速的，但是也仅仅只能用来抽离出公共JS第三方库，我们自己的工程的代码是无法享受CDN节点加速的
[猜想2（启动现代模式的打包结果优化）]: 我们能不能将vue的打包结果分成两种打包结果，一种是不做Bable代码兼容，我们的代码体积就会小很多，然后在高版本用户访问时他加载的是我们提供的未Bable代码，而低版本浏览器访问时，因为兼容性问题，他们去加载我们的已Bable代码，这样不就既保证了高版本浏览器用户的体验，又保证了低版本浏览器用户的兼容吗？

那么我们要怎么来实现呢？接下来详细介绍这两个优化方式↓↓↓

2.2优化公共第三方JS库打包体积

这里我们推荐一个拥有大量第三方JS库的CDN加速（公共）： BootCDN
在这里插入图片描述

在这个上面我们可以搜到大量已经部署在CDN上的第三方JS库，例如Vue，Vue-Router，Vuex，jQuery，Mockjs

这里我们可以对vue-cli的webpack配置做一些手脚：

如何往vue-cli中加入自定义的webpack配置，参考官方Vue-Cli文档 官方文档

// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
        vue: "Vue",
        vuex: "Vuex",
        "vue-router": "VueRouter",
        axios: "axios",
        jquery: '$',
        mockjs: 'Mock'
    },
  },
};

其实我们mock无需这样子做，因为真实的项目开发中mock是一定不存在的，他只会方便我们前端进行接口数据模拟的工具

由于我们这样子加的话我们会导致开发环境也会做这些操作，这样会影响我们的开发效率，所以我们需要区分开发环境配置和生产环境配置，我们可以参考上面47.在Vue-Cli中自定义webpack配置将configureWebpack配置到生产环境配置中，而不要加在开发环境配置中

由于我们将他们抽离了出去使用第三方JS库了所以我们需要在页面中自己手动引入CDN节点的第三方JS库：

此时我们为什么外面要套一个Nodejs的模板语法呢？因为我们这些script引入的资源在开发环境是不需要的，所以我们去判断当前打包环境是否是生产环境，如果是生产环境我们才会拥有这些script标签在开发环境中它是不会存在的

生产环境的html：

开发环境的html：

因为我们在webpack中配置了替换全局变量，所以我们在use语法时需要进行特殊处理：

vur-router：

vuex：

而像axios，Vue，Mock，这种因为与变量名重合所以不用考虑

然后我们打包就会发现我们的项目中第三方库的JS体积都被抽离出去了：

项目如果经过了gzip的压缩则变成44.4kb的大小高度，利用公共CDN我们实现了打包体积的优化

注意：在web安全的世界中js其实是最大的安全漏洞隐患，因为我们用的是别人给的CDN，所以引用的是别人的js代码，此时我们想到了没有，我们网站的js代码是别人给的，那别人是不是如果改动了js代码，那么可以实现跨站脚本执行，那么我们网站的安全何从谈起，所以大厂都有自己的CDN完全不慌，这只是一个隐患，有可能发生而已。毕竟权力掌握在自己手里才是最安心的

2.3启动现代化模式的打包方式优化不同浏览器版本的用户

这种优化方式在vue-cli中帮我们考虑到了并帮我们做了，我们只需在package.json配置文件中给build执行的cmd代码加上 --modern即可：

因为它会又两种打包结果，所以我们的项目体积可能会比一种打包结果的体积大，不过在高版本用户使用时他只会加载自己的那部分小js代码，vue通过对我们的html做了手脚：实现了加载的优化

prefetch的优先级比preload的低，prefetch相当于我现在不怎么用你慢慢加载就好，preload是一开始你就必须要加载因为我现在急用

这种方式的优化非常的方便，无需我们去做任何事情，vue-cli在打包时就帮我们做好了

说了这么多打包加载上面的优化，可是我们用户访问时影响最多的还是我们的组件性能，我们一个小型项目的组件都可能拥有上百个组件，大型项目更不用说了，所以我们组件方面的优化是非常重要的一个优化，那么接下来我们就来讲解组件上的优化↓↓↓

2.4组件加载方面的优化

我们想想我们通常在什么地方加载组件呢？是不是当我们匹配到某个路由时加载某些组件，对吧？那么我们在vue-router中是如何引入组件的呢？你是否是这样引入组件的：

我们想想，如果import在上面是不是不管我们这个路由是否被匹配代码从上往下读，都会夹在我们所有的组件，可是我们有很多组件现在都用不到呀，那它这个时候就将我们的组件加载进入，很影响我们用户第一次加载时的问题呀，**我们能不能实现，当我匹配到这个路由了他在去加载这个组件呢？**这就是我们要说的异步组件加载

其实实现异步组件加载很简单我们只需要改变一种组件引入的写法即可：

我们大家都知道import返回的是一个promise，所以import是异步的，然后我们通过阅读官方文档知道，component不但可以接收组件配置对象，还可以接收一个函数，然后通过执行这个函数返回一个组件配置对象，这就是一个质的变化了，原先我们通过实实在在的组件进行占位，而我们此时使用的仅仅只是几行函数代码进行占位了，且当我匹配到时再去执行这个函数然后拿到组件

组件的本质其实就是一个组件配置对象，我们可以回想一下vue文件的script部分，我们是不是都会有一个export default {

}这就是导出我们这个组件中的配置

这样的第一次加载效率能不快吗？

vue的官方文档也有对异步组件进行介绍，还有更多更好的配置方式在官方文档中都有介绍 官方文档

2.5首屏显示优化

我们大家都知道我们vue页面中所有的dom都是通过js执行然后才渲染完成的，我们的html代码实际上仅仅只有几十行，那么我们如果加载js时很慢页面就会出现一段白屏阶段，那么这个白屏阶段给用户的体验就不是很好，我们是否可以给一些显示给用户看呢？

我们可以在项目中加入一个加载动效的动画图片在静态文件中，然后在html文件的app这个div中加入这个图片让它动就完事了，我们可以在app这个div中随便写东西，因为我们知道当一个元素被作为模板时，它原先里面的内容就会全部被覆盖，所以我们随便写：

当我们的js加载完成之后我们的img就会被覆盖了，所以这种效果是特别好的，因为静态资源是在我们的项目当中直接有的，所以加载效率会特别的快，所以尽量让图片的大小变小这样会更好的提高项目效率

3.总结

优化方案：

1. CDN提取公共库
2. 使用现在化的打包方式
3. 使用异步组件
4. 白屏处理

以上就是所有的Vue优化方案了，如果有帮助到大家可以动动你的小手一键三连，博主会不定时发送【对标大厂的必会面试题】、【必会常用算法】、【必会高并发解决】、【优化】等专题栏目供大家学习观看，如果有更多更好的优化方案欢迎大家评论呀，博主会第一时间进行测试然后总结给大家的！