1.vue异步组件技术

使用vue-router配置路由，使用vue的异步组件技术，可以实现按需加载

{
    path: '/test',
    name: 'Test',
    component: resolve => require(['./TestDemo'], resolve)
}

2.使用import

路由懒加载

const Foo = () => import(/* webpackChunkName: 'foo' */'./Foo.vue');
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

 我们可以设置webpackChunkName，并且在webpack.config文件里的output中可以使用

output: {
    chunkFilename: '[name].bundle.js' // 对应webpackChunkName
},

3.使用webpack提供的require.ensure()

 可以在注册局部组件时使用：

components: {
     pdfViewer: r => require.ensure([], () => r(require('./pdfViewer')), 'pdfViewer')
}

 

参考资料： vue项目实现按需加载的3种方式

require.ensure

vue 异步组件