當頁面中一個文件過大并且還不一定用到的時候，我們希望在使用到的時候才開始加載這個文件俗稱按需加載。這樣可以減少頁面的響應時間，提高訪問速度。

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

總結

以上是生活随笔為你收集整理的webpack中实现按需加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。