Vue route lazy load

Vue route lazy load

For SPA single page applications, when they are packaged and built, the JavaScript package will become very large, affecting the page loading speed. The components corresponding to different routes will be divided into different code blocks, and then the corresponding components will be loaded when the routes are accessed. This is the lazy loading of routes.

Implementation mode

Vue asynchronous component

Vue allows you to define your component in the form of a factory function, which will asynchronously parse your component definition. Vue will trigger the factory function only when the component needs to be rendered, and will cache the results for future re rendering.

Vue.component("async-example", function (resolve, reject) {
  setTimeout(function() {
    // Pass the component definition to the 'resolve' callback
      template: "<div>I am async!</div>"
  }, 1000)

The factory function will receive a resolve callback, which will be called when you get the component definition from the server. Of course, you can also call reject(reason) to indicate the loading failure. The setTimeout here is only used to demonstrate the asynchronous transfer of component definition. Using asynchronous components together with the code splitting function of webpack can achieve the effect of lazy loading components.

Vue.component("async-webpack-example", function (resolve) {
  // This special 'require' syntax will tell webpack
  // Automatically cut your build code into multiple packages
  // It will be loaded through Ajax request
  require(["./my-async-component"], resolve)

You can also return a Promise in the factory function, adding webpack 2 and ES2015 syntax together.

  // This dynamic import will return a 'Promise' object.
  () => import("./my-async-component")

In fact, in the configuration of Vue router, we can directly combine Vue's asynchronous components and Webpack's code segmentation function to realize the lazy loading of routing components. After packaging, each component generates a js file.

  path: "/example",
  name: "example",
  //After packaging, each component generates a chunk file separately
  component: reslove => require(["@/views/example.vue"], resolve)

Dynamic import

In webpack 2, the dynamic import syntax can be used to define the code partition point split point, which is also recommended by the official. If Bable is used, the syntax dynamic import plug-in needs to be added to enable Babel to correctly parse the syntax.

//By default, each component is packaged into a js file separately
const example = () => import("@/views/example.vue")

Sometimes we want to package all components under a route in the same asynchronous block chunk. We need to use a special annotation syntax named chunk to provide chunk name. We need webpack > 2.4.

const example1 = () => import(/* webpackChunkName: "Example" */ "@/views/example1.vue");
const example2 = () => import(/* webpackChunkName: "Example" */ "@/views/example2.vue");

In fact, we can directly define lazy loading in Vue router configuration.

  path: "/example",
  name: "example",
  //After packaging, each component generates a chunk file separately
  component: () => import("@/views/example.vue")

Require. Provided by webpack ensure

Use webpack's require Ensure can also be loaded on demand. Similarly, multiple routes with the same chunkName will be combined and packaged into a js file.

// require.ensure(dependencies: String[], callback: function(require), chunkName: String)
    path: "/example1",
    name: "example1",
    component: resolve => require.ensure([], () => resolve(require("@/views/example1.vue")), "Example")
    path: "/example2",
    name: "example2",
    component: resolve => require.ensure([], () => resolve(require("@/views/example2.vue")), "Example")

One question per day

reference resources

Tags: Vue

Posted by Bullit on Tue, 10 May 2022 04:01:06 +0300