vue优化首页加载速度

2,117 阅读2分钟

问题描述

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

原因

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

image.png

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

解决方案

将引用的外部 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 引入的方式。