webpack路由按需加载、路由懒加载 require.ensure()、import()

webpack路由按需加载

require.ensure([…modules],()=>{}[,errorCallBack[,chunkName]]);

第一个参数的依赖关系是一个数组，代表了当前需要进来的模块的一些依赖;
第二个参数回调就是一个回调函数其中需要注意的是，这个回调函数有一个参数要求，通过这个要求就可以在回调函数内动态引入其他模块值得注意的是，虽然这个要求是回调函数的参数，理论上可以换其他名称，但是实际上是不能换的，否则的的的的WebPack就无法静态分析的时候处理它;
第三个参数errorCallback比较好理解，就是处理错误的回调;
第四个参数chunkName则是指定打包的组块名称。

const list = resolve => {
    require.ensure([], resolve(require('./list.jsx')), 'list');
} 

import

这里的import不同于模块引入时的import，可以理解为一个动态加载模块的函数(function-like)，传入其中的参数就是相应的模块。例如对于原有的模块引入import react from 'react’可以写为import(‘react’)。但是需要注意的是，import()会返回一个Promise对象，所以可以使用.then((module)=>{}) .catch((error)=>{})

    const list = resolve => {
    	import('./list.jsx').then(
        	module => { resolve(module); }
    	).catch(error => {
        	console.log(error);
    	});
 	}

调用配置

var router = new Router({
    routes: [{
        path: '/list',
        conmponent: list,
        name: 'list'
    }]
});