最近再接手一个vue项目的时候，公司运营部就说首页加载要10秒以上时间，这谁能忍受，老板也说时间太久，技术部老大说之前的同事优化过一次，时间还是这么久，重担就落在我身上了，于是我就开始着手优化，最终的结果呢就是优化到了2秒以内加载出来，这里分享一下我优化的经验。(现在优化过得项目已经上线，领导们反馈说比之前快多了，体验也更好了，心里还是比较满足的，嘿嘿)。
本篇博客介绍的vue2.0版本的优化，因为项目很久远，所以是老的版本，后期会更新vue3.0版本的优化
要想优化这个加载速度，的先知道加载慢的原因.
再vue项目中，引入到项目中的js,css都会被打包进入vendor.js,如果引入的第三方库众多，最后打包后的vendor.js就会体积庞大(达到了惊人的3M多)，浏览器再加载该文件后才会进入首屏，如果vendor.js体积过大，那么加载的时间就越久，白屏的时间就越长。
npm install webpack-bundle-analyzer -D
webpack.prod.conf.js的文件中------或者vue.config.js文件中配置该插件const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins:[
new BundleAnalyzerPlugin ();
]
npm run build --report浏览器会自动打开分析结果，结果如下图所示:
这里需要注意的是：在没有优化之前，这里体积最大的是
vue 全家桶的包和element-ui、mint-ui的包
这几个包特别大，导致打包后的vendor.js文件特别大，白屏时间就很久。
这里要特别注意，第三方cdn慎用，除非你们自己花钱买的cdn,否则自己的项目挂掉就很难受了，我是不会再用免费的cdn服务了，太坑了。
可以采用CDN加速引入，但是这个有风险，就是第三方库挂掉或者什么的，可以选择付费的cdn加速。
或者下载到本地上传到自己的服务器，总共三套方案，可以同时使用，保证安全性。
举例说明：
//这里是我再项目中的配置
//切记只适用于测试，要是上线一定是购买付费的
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
再build文件夹下的webpack.base.conf.js中配置externals可以分离打包第三方资源包，key是依赖包的名称，value是源码抛出来的全局变量,这样打包后这些文件就不会打包到vendor.js 和app.js中，会大大减少打包体积。(尤其是你的项目用了多个三方库)
这个做法就是可以不把这些资源打包到bundle和vendor.js中，而是在运行时去获取需要的依赖和资源，大大减少打包的体积。
具体的可以看externals官方文档介绍
举例说明：
再index.html中
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue-router.min.js"></script>
</body>
再build文件夹中webpack.base.conf.js中
module.exports = {
externals: {
'vue':'Vue',
'vue-router':'VueRouter',
'vuex':'Vuex',
'moment': 'moment',
'axios': 'axios',
'qs': 'Qs',
'md5': 'md5',
'mint-ui': 'MINT',
},
}
这里需要注意的是第三包尽量采用一下介绍的方式，不要再main.js中使用import引入，然后在使用vue.use注册，因为这种方法会被打包进入
vendor.js和app.js中。
这个是相当重要的一步,这步会大大减少打包后的体积，提升加载速度
在访问到相关页面才加载对应的路由和资源，才是正确的，否则全在初始化项目时加载，那么首屏时间就会很久。
举例说明：
路由懒加载模式配置
let routes = [
{
path: '/map', //地图
name: 'map',
component: resovle => require(['@/pages/map'],resovle),
meta: { noRequiresAuth: true },
},
{
path: '/redirectLogin', //支付回跳
name: 'redirectLogin',
component: resovle => require(['@/pages/site/redirectLogin'],resovle),
meta: { noRequiresAuth: true },
}
]
非----懒加载模式配置 router.js配置
import Vue from 'vue'; //这句话可以直接删掉的，因为配置了externals
//import Router from 'vue-router';
//import login from '@/pages/site/login';
采用require方式代替import
const Router = require('vue-router');
const login = require('@/pages/site/login');
Vue.use(Router);
let routes = [
{
path: '/login', //登陆
name: 'login',
component: login,
meta: { noRequiresAuth: true },
},
]
以下是使用gzip后的效果
开启gzip后打包后的文件会很小，如下图所示：
在浏览器网页中会看到如下
vendor.js和app.js体积过大的时候。下边的几张图会很直观的看出来压缩前后的包体积
UglifyJsPlugin插件压缩js文件)optimize-css-assets-webpack-plugin插件来压缩css代码)在我接手这个项目的时候，这个项目中使用了3个三方库，分别是element-ui、mint-ui、vant-ui加载这些库就占用了很大的体积，导致项目体积贼大，加载很慢。
项目中使用一个tree组件就要引入一个库，这是不可取的，所以我在项目中删除了element-ui库，由于目前mint-ui使用占比还是比较高，后续会慢慢移除这个库，加载速度还会提升
尽量一个项目只使用一个库，不要为了方便使用多个库而忽略了性能。
为了避免部署打包体积过大，我们通常去掉源文件（就是打包后看不到源代码),打包后的体积会小很多
再config文件夹下的index.js文件中
module.exports = {
build: {
env: build_env,
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: false, //这个设置为false就是去掉源文件
// Gzip off by default as many popular static hosts such as Surge or Netlify
// already gzip all static assets for you. Before setting to `true`, make sure
// to: npm install --save-dev compression-webpack-plugin
productionGzip: true, //开启gzip
productionGzipExtensions: [
'js', 'css'
],
// Run the build command with an extra argument to View the bundle analyzer
// report after build finishes: `npm run build --report` Set to `true` or
// `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
}
js文件放到页面最底部，css文件放在<header>中使用link引入。这么做的原因是因为浏览器渲染的机制是自上而下的，如果把js文件放到头部渲染，等js文件渲染完成才开始绘制页面，这样速度会很慢，并且会受到css渲染的阻塞，
所以要把js文件放到最底部，并且一些没有关联性的文件可以采用异步加载
可以看到vendor.js 和app.js都是被优化到100多kb.体积小了自然加载速度也就快很多。
vue项目打包后，要加载出页面，首先要加载
vendor.js和app.js文件，等把这两个文件加载完才会开始渲染页面，所以当网速不好的时候就会出现白屏，上边所做的首屏加载优化就可以大大减少白屏时间，但是不能完全避免没有白屏时间，所以从体验角度来讲，我们可以做一个loading 或者骨架屏来让使用者体验更好，那么问题来了，
这些首屏的加载中放到哪里才是正确的，下边会慢慢介绍
优化首屏加载速度和白屏问题，除了上述讲到的解决方案，还可以使用服务端渲染，也就是ssr技术，之前我是用过nuxt.js技术做ssr开发，体验还是很不错的。
上边已经讲述了优化问题， 把所有的优化都做完之后，加载速度有了显著提升 \color{green}{把所有的优化都做完之后，加载速度有了显著提升} 把所有的优化都做完之后，加载速度有了显著提升把所有的优化都做完之后，加载速度有了显著提升，但是再网慢的时候还是会有白屏，所以再白屏期间加骨架屏和loading就显得格外重要了。
再
index.html中添加如下代码，这样就可以有效解决白屏问题，用户的体验一下就上来了，是不是很完美。
<body>
//这里亲测有效，放心使用
<div id="app">
// 我们只需要再这里添加loading图或者骨架屏，有人会说怎么控制它的显示隐藏啊，
//不用担心，再项目初始化完成后会自动替换为你的页面。
<div class="self-loading">
页面正快马加鞭赶来，请耐心等待
</div>
</div>
</body>
经过了一周的努力优化，首屏加载速度终于有了质的提升，并且优化了首页白屏问题，还是很欣慰的。
后期还有再优化的点会继续更新，毕竟好记性比不上烂笔头，同时也方便学习。
下期会好好介绍如何解决项目打包上线后再浏览器（尤其是微信浏览器的缓存）。