vue 中实现异步加载模块

前提：使用vue官方脚手架搭建（webpack）

 

使用 vue-cli构建的项目,在 默认状况下 ,执行 npm run build  会将全部的js代码打包为一个总体,这样打包使单页面的应用的体积比较大，浪费资源，一般的作法使用按需加载，以节约资源。

  写法：const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')

 

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.在执行cnpm run dev 后chunk会被生成一个单独的js文件，当路由被访问的时候才加载对应chunk组件，这样就更加高效了。

 

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