# Lazy Loading Routes

When you package an application, the Javascript package becomes very large, affecting the page load. If we can split the components corresponding to different routes into different code blocks and then load the corresponding components when the route is accessed, this will be more efficient.

Combining Vue's async component feature and webpack's code splitting feature, it's trivially easy to lazy-load route components.

const Foo = () => import("./Foo.vue");

When you think your page's hot reload is slow, you need to look down ↓

# Differentiating development and production environments

[This solution has been eliminated]

When you have more and more pages in your project, using lazy-loading in the development environment becomes less appropriate, and every change of code that triggers a hot update becomes very slow. Therefore, it is recommended to only use the lazy loading function in the build environment.

Development:

// vue-loader at least v13.0.0+
module.exports = file => require("@/views/" + file + ".vue").default;

Note here that this method only supports vue-loader at least v13.0.0+nx-admin/issues/231

Production：

module.exports = file => () => import("@/views/" + file + ".vue");

# Elimination reason

Of course, there are some side effects of writing this way. due to

Every module that could potentially be requested on an import() call is included. For example, import(./locale/${language}.json) will cause every .json file in the ./locale directory to be bundled into the new chunk. At run time, when the variable language has been computed, any file like english.json or german.json will be available for consumption.

# New Plan

Use babel pluginsbabel-plugin-dynamic-import-node. It only does one thing by converting all import() to require(), so that all asynchronous components can be import synchronously using this plugin. Combined with the bebel environment variable BABEL_ENV, let it only work in the development environment, in the development environment will convert all import () into require ().

This solution to solve the problem of repeated packaging before, while the invasiveness of the code is also very small, you usually write routing only need to follow the lazy loading method of the official document routing on it, the other are handed to the handle of the cable, When you don't want to use this program, just remove it from Babel's plugins.

Code:

First add BABEL_ENV to package.json

"dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

Then .babelrc can only include the babel-plugin-dynamic-import-nodeplugins and make it work only in the development mode.

{
  "env": {
    "development": {
      "plugins": ["dynamic-import-node"]
    }
  }
}

After that, you're done. Routing can be written as usual.

 { path: '/login', component: () => import('@/views/login/index')}

Related code changes

# Improve

Webpack4 has been out, greatly improving the speed of packaging and compiling, and may not need to be so complicated afterwards. More page hot updates can be made quickly, completely eliminating the need for previously mentioned solutions.