Summary of several methods for loading vue routing components on demand

1. Normal loading

After using vue-cli to build a project, we will introduce relevant routing components under the Router folder, such as:

import Hello from '@/components/Hello'
import Boy from '@/components/Boy'
import Girl from '@/components/Girl'

The result of this is that webpack will be packaged into a whole js file when npm run build. If there are many pages, the file will be very large and slowly loaded. In order to solve this problem, it needs to be divided into multiple small files, and it also needs to be loaded asynchronously on-demand loading, that is, reloading is used without loading all of them.

2. Webpack's() implementation loading on demand

grammar:(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)

1. dependencies: an array of strings, declaring all modules required in the callback callback function, and the modules are loaded as dependencies
2. callback: As long as all dependencies are loaded, webpack will execute this function. The implementation of the require function is passed into this function as a parameter. When a program needs dependencies, you can use require() to load dependencies. The function body can use this parameter to further execute the require() module.
3. errorCallback: This function is executed when webpack loads dependencies fail.
4. chunkName: The name of the chunk created by (). By passing the same chunkName to different () calls, we can merge their code into a separate chunk, resulting in only one bundle that the browser must load.

How to use one:

([], function(require){
  require('./');
});
// At this time, a js file will be packaged separately. If there is no custom name, it will be named (md5 will be brought with you when there is a hash)

Usage method two:

(['./'], function(require) {
  require('./');
});

1. It is loaded as a dependency, but not executed (the official document says only loads the modules)
2. The and will be packaged into a file.
3. Only require in the callback function, only the content will be executed.
4. If you need to use content, you need to add require('./')

(['./list'], function(require){
  var list = require('./list');
  ();
});

The first parameter given is passed ['./list']. When it is executed here, it will be downloaded by the browser, but the code in the module will not be executed, which is what the webpack official website says, and will not evaluate it. When you really evaluate it, it is the next sentence var list = require('./list'); this is what is called lazy execution.

Multiple modules written in functions will be packaged together, which is no different from the above. In addition, modules written in arrays will also be packaged with them, regardless of whether you have manually executed them or not.

Used in vue

comst List = resolve => {
  ([],() => {
    resolve(require('./list'))
  },'list')
}

In fact, the function of resolve is the resolve in Promise, which defines an asynchronous component.

Use dynamic import syntax

const Foo = () => import(/* webpackChunkName: "foo" */ './');
const router = new VueRouter({
 routes: [
  { path: '/foo', component: Foo }
 ]
})
// /* webpackChunkName: "foo" */Use named chunk, a special annotation syntax to provide chunk name (requires Webpack > 2.4)// To add configuration to webpack, output needs to add a chunkFilenamechunkFilename: '[name].js'

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.