vue-router configures routing, using vue's asynchronous component technology, can achieve on-demand loading. This way, the next component generates a js file
Use cases:
{
path: '/promisedemo', name: 'PromiseDemo', component: resolve => require(['../components/PromiseDemo'], resolve)
}
import() of es proposal (recommended)
webpack official document: use import() in webpack
vue official document: lazy loading of routes (using import())
Use cases:
// under2Line of code，No specifiedwebpackChunkName，Package each component into onejsdocument。 const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1') const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2') // under2Line of code，The same is specifiedwebpackChunkName，Will merge and package into onejsdocument。 // const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo') // const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2') export default new Router({ routes: [ { path: '/importfuncdemo1', name: 'ImportFuncDemo1', component: ImportFuncDemo1 }, { path: '/importfuncdemo2', name: 'ImportFuncDemo2', component: ImportFuncDemo2 } ] })
Webpack provides ()
vue-router configures routing, uses webpack technology, and can also achieve on-demand loading.
In this case, multiple routes specify the same chunkName and will be merged into a js file.
As an example:
{ path: '/promisedemo', name: 'PromiseDemo', component: resolve => ([], () => resolve(require('../components/PromiseDemo')), 'demo') }, { path: '/hello', name: 'Hello', // component: Hello component: resolve => ([], () => resolve(require('../components/Hello')), 'demo') }
The above is all the knowledge points introduced this time. Thank you for your study and support.