webpack按需加载

什么是按需加载：

当页面中一个文件过大并且还不一定用到的时候，我们希望在使用到的时候才开始加载这个文件俗称按需加载。这样可以减少页面的响应时间，提高访问速度。

按需加载的实现方式：

使用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