vue优化首页加载速度

问题描述

公司线上项目首页加载速度很慢。

原因

vendor.xxxxx.js体积过于庞大，此文件为第三方插件库。（图源网络，侵权删）
在vue项目中，引入到项目中的js、css文件，编译时都会被打包到vendor.js文件中，影响首页加载速度。

查找打包数据，发现该文件在打包时变提示体积过大【big】

解决方案

将引用的外部 js、css 文件剥离出来，不编译到 vendor.js 中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将 vendor.js、外部的 js 等加载下来，达到首次打开加速的目的。

推荐外部的库文件使用CDN资源：
www.bootcdn.cn/

第一步：引入资源

在 index.html 中，添加CDN资源（去CDN官方网站找项目对应版本的CDN资源）

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/3.7.2/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-i18n/5.0.3/vue-i18n.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/2.5.0/vuex.js"></script>
复制代码

第二步：添加配置

在 bulid/webpack.base.conf.js 文件中，增加 externals，将引用的外部模块导入

//将以下文件不打包
externals: {
    'vue-router': 'VueRouter',
    "vue-i18n": 'VueI18n',
    "vuex": 'Vuex',
    "echarts": 'echarts',
    'qs': 'Qs',
    "vue":"Vue"
},
复制代码

第三步：去掉原有的引用

//import Vue from 'vue';
// import VueRouter from 'vue-router';
// import Vuex from 'vuex';
// import VueI18n from 'vue-i18n';
// import echarts from 'echarts'

const VueRouter = require('vue-router');
const Vuex = require('vuex');
const Vue = require('vue');
const echarts = require('echarts');
const VueI18n = require('vue-i18n');

Vue.use(VueRouter);
Vue.use(Vuex);
Vue.use(VueI18n);
Vue.use(iView);
复制代码

重新npm run build 会发现vendor.xxxx.js文件体积变小了很多。

注意事项

1、在第一步引入资源时注意 vue.js 必须在 vue-router、vuex、element-ui 之前引入。
2、在第二步修改配置时注意 “element-ui”: “ELEMENT” 是固定写法不能更改。
3、如果 element-ui 采用 cdn 引入的方式，vue 不采用 cdn 引入的方式，这样打包以后打开 dist 下的 index.html 时页面空白报错，必须 vue 和 element-ui 都采用 cdn 引入的方式。
复制代码