VUE+Webpack 实现懒加载的三种方式

Vue-cli 3的发布，路由懒加载更简单了

合理使用代码分割 合并相同的模块 会让你的项目加载的更快

,
      {
        path: "路由路径",
        component: () =>
          import(/* webpackChunkName: "chunk名称 用于代码分割 " */ "组件路径")
      }

第一种

引入方式 就是正常的路由引入方式

const router = new Router({
    routes: [
		{
		   path: '/hyh',
		   component: hyh,
		   name: 'hyh'
		}
	]
})

第二种

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

第三种 推荐！！！

// r就是resolve
const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({
    routes: [
		{
		   path: '/list/blog',
		   component: list,
		   name: 'blog'
		}
	]
})

打包后的JS按照你的模块划分去拆分

介绍一种管理路由的方式

// 定义一个路由的数组 类似于白名单黑名单
const defaultRouterArr = ['/list/share']
router.beforeEach((to, from, next) => {
// 如果匹配到这个数组 
    if (defaultRouterArr.indexOf(to.path) >= 0) {
        // 执行各种操作 比如让他去登录  不让她进去等等  通过next方法来控制  详细参考vue路由
        next()
    } else {
        next()
    }
})