How to implement routing by vue lazily loading according to the development status

Editor to share with you how to achieve vue routing according to the development status of lazy loading, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Routes load lazily according to development status

1 general situation

Usually when we load a component in a route:

Import Login from'@ / views/login.vue'export default new Router ({routes: [{path:'/ login', name: 'login', component: Login}]})

When you need to load lazy-loading lazily, you need to change the component of routes to () = > import ('@ / views/login.vue') one by one, which is troublesome.

As you have more and more project pages, it becomes inappropriate to use lazy-loading in the development environment, and updates become very slow every time the code changes. Therefore, it is recommended that you use the routing lazy loading feature only in the build environment.

2 optimization

Lazy loading of components can be easily realized according to the asynchronous components of Vue and the code segmentation function of Webpack, such as:

Const Foo = () = > import ('. / Foo.vue')

When distinguishing between a development environment and a production environment, you can create two new files under the routing folder: _ import_production.js

Module.exports = file = > () = > import ('@ / views/' + file + '.vue')

_ import_development.js, the vue-loader version is at least v13.0.0 or above

Module.exports = file = > require ('@ / views/' + file + '.vue') .default

In the router/index.js file that sets the route:

Const _ import = require ('. / _ import_' + process.env.NODE_ENV) export default new Router ({routes: [{path:'/ login', name: 'login', component: _ import ('login/index')}]})

In this way, components are not lazily loaded in the development environment and lazily loaded in the production environment.

The above is all the contents of the article "how vue implements routing according to development status lazily loading". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!