当页面中一个文件过大并且还不一定用到的时候，我们希望在使用到的时候才开始加载这个文件俗称按需加载。这样可以减少页面的响应时间，提高访问速度。
使用webpack打包的出来的文件要实现以上的要求有两种方式，一个是webpack特有的require.ensure方法，还有一个是import方法。
require.ensure(dep: array, cb: function, name?: string)
第一个参数是该模块的依赖，第二个参数是模块加载完成后执行的回调，第三个参数是对应webpack.config.js中output.chunkFilename: ‘[name].js’ 中的name。
index.html文件
<button id='btn'>点击我
</button>
index.js文件
document.querySelector('#btn').onclick = function () {require.ensure([], function () {let a = require('./asynca.js')console.log('asynca模块加载完毕：'a)}, 'asynca')
}
asynca.js文件
console.log('我是async模块')
export const a = '模块async'
webpack.config.js文件
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: './src/index.js',output: {path: path.resolve('./dist'),filename: '[name].[chunkHash].js',chunkFilename: '[name].[chunkHash].js'},plugins: [new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'})]
}
打包结果如下：
预览index.html，查看资源请求和输出情况：
打开dist中打包后的文件发现，只有一个index.html文件和man…js文件被加载了，并且require.ensure的回调并没有被执行过的迹象：
点击按钮后资源请求和输出情况：
asynca文件被动态加载进来，并且require.ensure的回调函数被执行了。
小结
通过以上的观察我们通过require.ensure实现了我们动态加载模块的目的。
import()
该方法返回一个promise，文件加载完成之后会将模块导出给promise的回调。
index.import.js
document.querySelector('#btn').onclick = function () {console.log('我是通过import来实现按需加载的')let a = import('./asynca.js')a.then(function (res) {console.log('加载完成的async模块', res)})
}
注：其他文件和ensure方法的一致。
打包结果如下：
预览index.html，查看资源请求和输出情况：
点击按钮后资源请求和输出情况：
小结
观察发现import方法同样可以实现按需加载的需求，但是生成的文件名是按数字来命名的，并不能像ensure的第三个参数来指定，我想应该是有方法实现的。
参考
https://segmentfault.com/q/1010000014699780/a-1020000015102124
