vue异步加载模块

vue异步加载模块

使用vue-cli构建项目，在默认情况下，执行 npm run build/yarn build会将所有的js打包成一个整体，这样情况下 单页面 第一次加载页面会耗费太多时间，导致页面长时间处于 空白情况。所以通常的写法都是 按需加载（用于项目比较大的情况下，就只有几个页面的情况，建议不适用 异步加载模块的方式，加载模块），来提高加载速度。

常用的几种用法示例

1、第一种

//采用该方式加载模块，页面初始化的时候，会将所有的模块都加载，适用于小型项目开发中。
import Home from './Home.vue';

const router = new VueRouter({
	mode: "hash",
	routes: [{
		path: '/',
		component: Home,
	}]
});

2、第二种

{
    path: "/404",
    component: () => import("@/views/error-logger/404"),
  },

3、第三种

const router = new Router({
  routes: [
    {
       path: '/home',
       component: resolve => reqire(['../views/Home.vue'], resolve)
     }
  ]
})

4、第四种

// r就是resolve 官方推荐写法 按模块划分懒加载 
const router = new Router({
  routes: [
    {
     path: '/home/home',
     component: r => require.ensure([], () => r(require('../components/home/home')), 'home');,
    }
  ]
})

5、第五种

const Home = resolve => {
  import("@/components/home/home.vue").then( module => {
      resolve(module)
  }
}

export default [{
  path: '/home',
  component: Home
}]

require.ensure

1.语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])

• • dependencies: 依赖的模块数组
• callback: 回调函数，该函数调用时会传一个require参数
• chunkName: 模块名，用于构建时生成文件时命名使用

2.说明: require.ensure在需要的时候才下载依赖的模块，当参数指定的模块都下载下来了（下载下来的模块还没执行），便执行参数指定的回调函数。require.ensure会创建一个chunk，且可以指定该chunk的名称，如果这个chunk名已经存在了，则将本次依赖的模块合并到已经存在的chunk中，最后这个chunk在webpack构建的时候会单独生成一个文件。

3.在执行npm run dev 后chunk会被生成一个单独的js文件，当路由被访问的时候才加载对应chunk组件，这样就更加高效了。

官方文档： https://router.vuejs.org/zh-cn/advanced/lazy-loading.html

参考文献：vue 中实现异步加载模块