vue路由组件按需加载的几种方法小结
1.普通加载
使用vue-cli构建项目后，我们会在Router文件夹下面的index.js里面引入相关的路由组件,如：
importHellofrom'@/components/Hello' importBoyfrom'@/components/Boy' importGirlfrom'@/components/Girl'
这样做的结果就是webpack在npmrunbuild的时候会打包成一个整个的js文件，如果页面一多，会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载
2.webpack的require.ensure()实现按需加载
语法：require.ensure(dependencies:String[],callback:function(require),errorCallback:function(error),chunkName:String)
- dependencies：字符串构成的数组，声明callback回调函数中所需的所有模块,模块作为依赖被加载
- callback：只要加载好全部依赖，webpack就会执行此函数。require函数的实现，作为参数传入此函数。当程序运行需要依赖时，可以使用require()来加载依赖。函数体可以使用此参数，来进一步执行require()模块。
- errorCallback：当webpack加载依赖失败时，会执行此函数。
- chunkName：由require.ensure()创建出的chunk的名字。通过将同一个chunkName传递给不同的require.ensure()调用，我们可以将它们的代码合并到一个单独的chunk中，从而只产生一个浏览器必须加载的bundle。
使用方法一：
require.ensure([],function(require){
require('./a.js');
});
//此时会单独打包出一个js文件，没有自定义名称的话，会被命名为1.js(有hash时候会带上md5)
使用方法二：
require.ensure(['./a.js'],function(require){
require('./b.js');
});
1、此时a.js作为依赖被加载，但是没有被执行（官方文档说的onlyloadsthemodules）
2、a.js和b.js会被打包成一个文件。
3、回调函数里只require了b.js，只有b.js的内容会被执行。
4、如果你需要使用a.js的内容，需要再加上require('./a.js')
require.ensure(['./list'],function(require){
varlist=require('./list');
list.show();
});
给require.ensure的第一个参数传了['./list']，执行到这里的时候list.js会被浏览器下载下来，但是并不会执行list.js模块中的代码，也就是webpack官网说的，不会进行evaluate。真正进行evaluate的时候是到了后面这句varlist=require('./list');这就是所谓的懒执行。
写在函数中的多个模块会被打包在一起，这一点和上面没有区别。另外，写在数组中的模块也会跟他们打包在一起，不管你有没有手动执行。
vue中使用
comstList=resolve=>{
require.ensure([],()=>{
resolve(require('./list'))
},'list')
}
其实resolve的作用就是Promise里面那个resolve，在这里就是定义一个异步的组件
使用动态import语法
constFoo=()=>import(/*webpackChunkName:"foo"*/'./Foo.vue');
constrouter=newVueRouter({
routes:[
{path:'/foo',component:Foo}
]
})
///*webpackChunkName:"foo"*/使用命名chunk，一个特殊的注释语法来提供chunkname(需要Webpack>2.4)
//webpack要加配置output需要加个chunkFilename
chunkFilename:'[name].js'
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。