什么是按需加载：
当页面中一个文件过大并且还不一定用到的时候，我们希望在使用到的时候才开始加载这个文件俗称按需加载。这样可以减少页面的响应时间，提高访问速度。
按需加载的实现方式：
使用webpack打包的出来的文件要实现以上的要求有两种方式，一个是webpack特有的require.ensure方法，还有一个是import()方法。
方法一：
require.ensure()方法：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‘
})
]
}
asynca文件被动态加载进来，并且require.ensure的回调函数被执行了。
方法二：
import()：该方法返回一个promise，文件加载完成之后会将模块导出给promise的回调。
document.querySelector(‘#btn‘).onclick = function () {
console.log(‘我是通过import来实现按需加载的‘)
let a = import(‘./asynca.js‘)
a.then(function (res) {
console.log(‘加载完成的async模块‘, res)
})
}
参考：https://blog.csdn.net/letterTiger/article/details/89299606