background

The loading speed of the first screen of vUE project line is very slow. The size of the main.js file is 3.6MB and the loading speed is as high as 6.5s after checking the resource files loaded on the network, which has seriously affected the user experience. After checking, I found that the size of main.js after local packaging of the project is also up to over 30 megabits. In order to reduce the size of main.js file after packaging, I consulted many experience articles and found that the volume can be greatly reduced after the introduction of CDN instead of package.

advice

For large libraries like Echarts, do not mount large libraries, generally not used in many places to load on demand.

Use CND resources

Here we have modified vue, VUe-Router, vuex, Element-ui, and mint-ui.

  • First modify the template fileindex.htmlNote the previous version number.
<head>.<! -- Element-UI component styles -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.5.4/theme-chalk/index.css">
    <! -- Mint-UI component introduces styles -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/mint-ui/2.2.13/style.css">
</head> 
<body> 
    <! Vue -->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <! -- Vuex -->
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <! -- Introducing vue-router -->
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <! -- Element UI component library -->
    <script src="https://cdn.bootcss.com/element-ui/2.5.4/index.js"></script>
    <! Mint-ui component library -->
    <script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>
    <div id="app"></div> 
</body>

Copy the code
  • Modify thebuild/webpack.base.conf.js. configurationexternals 
/ * Note: Since this project is vue-cl2, and there is a node middle layer, so I modified the webpack.client.config.js file */module.exports = {
    ...
    externals: {
       // CDN Element depends on the global variable Vue, so Vue also needs to be introduced using CDN
       'vue': 'Vue'.'vuex': 'Vuex'.'vue-router': 'VueRouter'.Import XXX from 'elementary-ui', import XXX from 'elementary-ui'
       // Instead of node_modules, look for ELEMENT, the global variable
       'element-ui': 'ELEMENT'.'mint-ui': 'MINT',},... }Copy the code
  • Modify thesrc/router/index.js
Import Router from "vue-router"; Vue.use(Router); const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, Location). Catch (err => err)} const router = new router ({}) import VueRouter from "vue-router"; const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, Location). Catch (err => err)} const router = new VueRouter({}) So we need to use VueRouter to receive import VueRouter from "vue-router"; Vue. Use (Router)Copy the code
  • Modify thesrc/store/index.js
./ / comment out
// Vue.use(Vuex).Copy the code
  • Modify thesrc/main.js
/* the original look */
import Vue from "vue";
import App from "./App.vue";
import router from "./router";

// mint-ui
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI);
// element-ui
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUi);

new Vue({
  render: h= > h(App),
  router,
  store
}).$mount("#app");


/* What will it look like after modification */
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import {sync} from 'vuex-router-sync' // Vuex-router-sync is used to synchronize the status of 'vuex-router' to 'vuex'

// mint-ui
import MINT from 'mint-ui'
Vue.use(MINT);
// element-ui
import ELEMENT from 'element-ui'
Vue.use(ELEMENT);

sync(store, router)

new Vue({
  render: h= > h(App),
  router,
  store
}).$mount("#app");

/ / summary:
1, element-ui, and mint-ui use element and mint for variable names. When externals is configured.Copy the code

Js file size has been reduced to 12MB. Of course, this is also due to the introduction of other things in the main.js file, and finally the time to open the page has been reduced. This article as a record and simple introduction, I hope to help you.