In the daily development of Vue project, with the increasing responsibility of business and the increasing amount of code, the problem is that the volume of packaged vendor.js is too large, which leads to the long time of loading space-time white pages and the poor experience for users. So we need to reduce the volume of vendor.js and solve this problem essentially.

Here are some practical methods used in the project. The optimized js is reduced by about 50%. The effect is quite obvious.

1，webpack externals

Why configure externals

Official explanation: The externals configuration in webpack provides a way of not referring to dependencies from bundles. The solution is that the bundles created depend on the dependencies that exist in the user environment.

For example, we will refer to various third-party js files in the project, such as jquery, vue, axios, etc. If we exclude these dependencies when packaging, we can greatly reduce the size of the file and improve the page loading speed. The configuration method is as follows:

// Introducing resources into index.js
<script src="jquery.js"></script>
<script src="vuex.js"></script>


module.exports = {
     ...
     output: {
       ...
     },
     externals : {
       jquery: 'jQuery'
       'vue': 'Vue',
     }
     ...
   }

This strips away the dependency modules that do not need to be changed. In other words, the code shown below works well.

import $ from 'jquery';
import Vue from 'vue'

In this way, not only the use of third-party libraries remains unchanged before, but also the third-party libraries are peeled out of the packages of web packages, thus speeding up the packages of web packages.

2. Components are loaded on demand

This is also the point that can be optimized. If third-party component/UI libraries are frequently used, such as element-ui component libraries in my projects, if all of them are introduced, the project is very large, then components can be introduced on demand.

First, we need to install babel-plugin-component

npm install babel-plugin-component -D

Then, change. babelrc to:

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

Then we introduce some components, so that we don't need to introduce styles. Plug-ins will help us deal with them.

// main.js
import Vue from 'vue'
import { Dialog, Loading } from 'element-ui'

[Dialog, Loading].forEach((comp) => {
    Vue.use(comp);
})

3. Routing Lazy Loading

When building applications by packaging, JavaScript packages become very large, affecting page loading. It would be more efficient if we could divide the components corresponding to different routes into different code blocks and then load the corresponding components when the routes are accessed.

Method 1

const login = () => import('@/components/login')
const router = new VueRouter({
  routes: [
    { path: '/login', component: login }
  ]
})

Note: At this point, we need to install the babel-plugin-syntax-dynamic-import plug-in so that the syntax is recognized only when packaged.

Method 2

Sometimes we want to package all components under a route in the same asynchronous block. Just use the named chunk, a special annotation grammar to provide the chunk name (Webpack > 2.4 is required).

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

4. Data caching - keep-alive

A keep-alive method is provided in VUE2.0, which can be used to cache components, avoid loading corresponding components multiple times, and reduce performance consumption.

Examples: Users browse A pages, when the resources of A pages are loaded, users jump to B pages through routing, and then return to A pages. If there is no special treatment, the resources of A pages will be reloaded once, resulting in waste of resources. If we cache, we can reduce the number of requests, which is extremely high. User experience.

1. Caching partial pages

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

// The router settings are as follows
routers:[
    {   path: '/home',
        name: home,
        meta: {keepAlive: true}      //Setting true means you need to cache, not setting or false means you don't need to cache. 
    }
]

2. Caching component

<!-- basic -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

// include and exclude attributes allow components to be conditionally cached. Both can be represented by comma-separated strings, regular expressions, or an array.
<!-- Comma-separated string -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- regular expression (Use `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- array (Use `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

In addition to the above optimization methods, there are also conventional image compression and merge, CDN acceleration, compression code and other methods, you should be familiar with, here is not explained in one. If you still have a good optimization plan, please leave a message and exchange.~