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

使用webpack打包的出來的文件要實(shí)現(xiàn)以上的要求有兩種方式，一個是webpack特有的require.ensure方法，還有一個是import方法。

require.ensure(dep: array, cb: function, name?: string)

第一個參數(shù)是該模塊的依賴，第二個參數(shù)是模塊加載完成后執(zhí)行的回調(diào)，第三個參數(shù)是對應(yīng)webpack.config.js中output.chunkFilename: ‘[name].js’ 中的name。

index.html文件

<button id='btn'>點(diǎn)擊我 </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'})] }

打包結(jié)果如下：

預(yù)覽index.html，查看資源請求和輸出情況：

打開dist中打包后的文件發(fā)現(xiàn)，只有一個index.html文件和man…js文件被加載了，并且require.ensure的回調(diào)并沒有被執(zhí)行過的跡象：

點(diǎn)擊按鈕后資源請求和輸出情況：

asynca文件被動態(tài)加載進(jìn)來，并且require.ensure的回調(diào)函數(shù)被執(zhí)行了。

小結(jié)

通過以上的觀察我們通過require.ensure實(shí)現(xiàn)了我們動態(tài)加載模塊的目的。

import()

該方法返回一個promise，文件加載完成之后會將模塊導(dǎo)出給promise的回調(diào)。

index.import.js

document.querySelector('#btn').onclick = function () {console.log('我是通過import來實(shí)現(xiàn)按需加載的')let a = import('./asynca.js')a.then(function (res) {console.log('加載完成的async模塊', res)}) }

注：其他文件和ensure方法的一致。

打包結(jié)果如下：

預(yù)覽index.html，查看資源請求和輸出情況：

點(diǎn)擊按鈕后資源請求和輸出情況：

小結(jié)

觀察發(fā)現(xiàn)import方法同樣可以實(shí)現(xiàn)按需加載的需求，但是生成的文件名是按數(shù)字來命名的，并不能像ensure的第三個參數(shù)來指定，我想應(yīng)該是有方法實(shí)現(xiàn)的。

參考

https://segmentfault.com/q/1010000014699780/a-1020000015102124

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。