路由懒加载原理

1，按需引入组件：开发者将路由组件按照其路径进行拆分，并将每个组件放在单独文件中。 2，使用动态‘import’或特定框架的懒加载函数：每个组件打包成一个js文件 3，vue-router实现路由懒加载，

// 将 // import UserDetails from './views/UserDetails' // 替换成 const UserDetails = () => import('./views/UserDetails') ​ const router = createRouter({  // ...  routes: [{ path: '/users/:id', component: UserDetails }], })

4，

const router = new Router({  
routes: [   {     
path: '/list',     
component: (resolve) => {        
// 这里是你的模块 不用import去引入了        require(['@/components/list'], resolve)  
}   } ] })

5， 使用webpack的require.ensure技术，也可以实现按需加载。 这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。 const List = resolve => require.ensure([], () => resolve(require('@/components/list')),'list'); // 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载 const router = new Router({  routes: [ {    path: '/list',    component: List,    name: 'list' } ] }))

webpack配置webpackChunkName可以指定文件合并成一个js文件