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