vue项目按需引入的两种方式 import() 和 require.ensure()

require.ensure()
主要用于实现代码打包分离文件，require.ensure() 是 webpack 特有的

语法

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

在使用 CommonJS 模块语法时，这是动态加载依赖的唯一方法。然而现在基本被 import()代替了，都可以按需加载依赖项

dependencies：字符串构成的数组，会将其对应的文件拆分到一个单独的 bundle 中，此 bundle 会被异步加载
callback：webpack 会执行此函数，使用 require() 来加载依赖，函数体可以使用此参数，来进一步执行 require() 模块
errorCallback：当 webpack 加载依赖失败时，会执行此函数
chunkName：由 require.ensure() 创建出的 chunk 的名字，打包后会将其存放到此路径下

// 按需异步加载bar.js和它依赖的css 
// 打包到bar文件中
require.ensure(['./css'], () => { const f = require('./../bar.js'); }, 'bar');

r => require.ensure([], () => r(require('@/components/select')), 'main/select')

import()
如果我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中，只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。