Use lazy loading in Vue project development
1. The benefits of using routing lazy loading
When the project is packaged, the JavaScript package will become very large, which will affect the page loading. If the components corresponding to different routes are divided into different code blocks, then the corresponding components will be loaded when the route is accessed, which will provide more efficiency. .
Two, install related dependency packages
For details, please refer to the official routing documentation.
Installation dependency package documentation. After
installing the dependency package, it needs to be configured into the project
Three, declare the plugin dependency in babel.config.js
"@babel/plugin-syntax-dynamic-import"
Fourth, change the routing to the form of on-demand loading
Changed from imprort to const
// import Cate from '../components/goods/Cate.vue'
const Cate = () => import(/* webpackChunkName: "Cate_Parms" */ '../components/goods/Cate.vue')
When using the above form, it is necessary to install the dependent package! ! !
In this way, the lazy loading of the route is completed.