webpack中实现按需加载

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

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

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