Problem description

The company’s online project home page loading speed is very slow.

why

Vendor.xxxxx. js is too large. This file is a third-party plug-in library. In the vUE project, JS and CSS files introduced into the project will be packaged into vvendor. Js file during compilation, which affects the loading speed of the home page.

Search for packaging data and find that the file changes during packaging indicating that the size is too large

The solution

In this way, the browser can load vendor.js and external JS asynchronously using multiple threads to achieve the purpose of opening acceleration for the first time.

It is recommended that external library files use CDN resources: www.bootcdn.cn/

Step 1: Bring in resources

Add CDN resources in index. HTML (go to the CDN official website to find the CDN resources of the corresponding version of the project)

< 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 >Copy the code

Step 2: Add the configuration

In bulid/webpack base. Conf. Js file, increase the externals, refer to external module import

{'vue-router': 'VueRouter', "vue-i18N ": 'VueI18n', "vuex": 'vuex ', "echarts": 'echarts', 'qs': externals: {'vue-router': 'VueRouter', "vue-i18n": 'VueI18n', "vuex":' vuex ', "echarts": 'echarts', 'qs': 'Qs', "vue":"Vue" },Copy the code

Step 3: Remove the original reference

//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);
Copy the code

Re-npm run build will find vendor.xxxx.js file size is much smaller.

Matters needing attention

Note that vue.js must be introduced before vue-router, vuex, and element-ui. 2. Pay attention to "element-UI" when modifying the configuration in step 2: "Element" is fixed and cannot be changed. 3. If Element-UI adopts CDN introduction and VUE does not adopt CDN introduction, the page blank error will be reported when the index. HTML under Dist is opened after packaging, so both VUE and Element-UI must adopt CDN introduction.Copy the code