route按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()

1. vue异步组件技术

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

但是，这种情况下一个组件生成一个js文件。
举例如下：

{
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: resolve => require(['../components/PromiseDemo'], resolve)
        }

2. es提案的import()

• 推荐使用这种方式(需要webpack > 2.4)
• webpack官方文档：webpack中使用import()

vue官方文档：路由懒加载(使用import())

• vue-router配置路由，代码如下：

const notFound = () => import(/* webpackChunkName: "index" */ '@views/common/404')
const login = () => import(/* webpackChunkName: "index" */ '@views/common/login')
const register = () => import(/* webpackChunkName: "index" */ '@views/common/register')
const main = () => import(/* webpackChunkName: "index" */ '@views/main')
const myWorks = () => import(/* webpackChunkName: "my" */ '@views/my/index')
const myAccountSetting = () => import(/* webpackChunkName: "my" */ '@views/my/account-setting')
const makeIndex = () => import(/* webpackChunkName: "make" */ '@views/make/index')

 

3. webpack提供的require.ensure()

在webpack 2的官网上写了这么一句话：

              require.ensure() is specific to webpack and superseded by import().

    所以，在webpack 2里面应该是不建议使用require.ensure()这个方法的。但是目前该方法仍然有效，所以可以简单介绍一下。包括在webpack 1中也是可以使用。下面是require.ensure()的语法：

require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
 require.ensure（）接受三个参数：

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

• vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。

这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
举例如下：

const notFound = r => require.ensure([], () => r(require('@views/common/404')), 'index')
const login = r => require.ensure([], () => r(require('@views/common/login')), 'index')
const register = r => require.ensure([], () => r(require('@views/common/register')), 'index')
const main = r => require.ensure([], () => r(require('@views/main')), 'index')
const myWorks = r => require.ensure([], () => r(require('@views/my/index')), 'my')
const myAccountSetting = r => require.ensure([], () => r(require('@views/my/account-setting')), 'my')
const makeIndex = r => require.ensure([], () => r(require('@views/make/index')), 'make')

 

const Personal = r => require.ensure([], () => r(require('@/views/personal/index')), 'personal');

 

https://blog.csdn.net/jacktesla/article/details/80796775       vue项目实现按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()

https://blog.csdn.net/sma2mmm/article/details/83827813   require.ensure()和import() 使用区分