vue組件的按需加載

一、require.ensure()

require.ensuire(dependencies:String[],callback:function(require),errorCallback:function(error),chunkName:String)

const List = resolve =>{ require.ensuire([],()=>{ resolve(require('./list')) },'list') }

webpack在打包的時候會把整個路由打包成一個js文件，路由組件越多，js文件越大，加載越緩慢。使用require.ensure()加載的組件會單獨打出一個js文件。以下就是每個組件，沒有自定義名稱，會被從0開始命名（有hash的時候會被帶上md5）。

 

二、在router中配置，使用以下方法也可以實現按需加載，一個組件生成一個js文件。

{
    path: '/home',
    name: 'home',
    component:resove => require(['@/components/home'],resolve)
}

三、使用import()加載組件

const test1 = ()=>import('@/components/test1.vue')