webpack學習筆記(五) 懶加載

時間 2019-11-13

標籤 webpack 學習筆記加載简体版

原文原文鏈接

懶加載，也稱爲按需加載，是一種能夠提升網站初始響應速度的方式javascript

在網站初次加載時，並不會加載所有代碼，而是當用戶完成某些特定操做後，纔會引用新的代碼塊html

一、存在問題

好的，首先咱們仍是來看一下不使用懶加載時的狀況java

建立一個空文件夾 Demo，做爲項目的根目錄，而後在該目錄下運行如下命令安裝依賴node

> # 建立 package.json 文件
> npm init -y
> # 安裝 webpack
> npm install --save-dev webpack
> npm install --save-dev webpack-cli
> # 安裝 lodash 模塊
> npm install --save lodash

而後在根目錄下建立 dist 和 src 文件夾，並在文件夾下建立相應的文件，最終的目錄結構以下webpack

Demo
    - package.json
    - package-lock.json
    - webpack.config.js
    + node_modules
    + src
        - index.js
    + dist
        - index.html

webpack.config.js 的文件內容，指定 webpack 的一些基本配置web

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

/dist/index.html 的文件內容，引入打包以後的 bundle.js文件shell

<!doctype html>
<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
</html>

/src/index.js 的文件內容，當監聽到點擊事件以後，給 body 掛載一個 divnpm

在這種狀況下，不管用戶是否點擊，網頁都會提早加載 lodash 模塊json

import _ from 'lodash';

function getComponent() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}

document.addEventListener('click', () => {
    var element = getComponent();
    document.body.appendChild(element);
})

這種簡單的模擬可能還真的看不出會有什麼問題，那麼咱們把它還原到一個真實的場景，舉一個例子app

咱們將【加載 lodash 模塊】看做是【加載視頻資源】，將【點擊事件】看做是【點擊視頻播放按鈕】

某些狀況下，用戶可能不想觀看視頻，而咱們卻提前把視頻加載到網頁中，這樣就會大大下降網頁首次加載的速度

正確的作法應該是當用戶點擊視頻播放按鈕（點擊事件）以後，纔開始加載視頻資源（加載 lodash 模塊）

二、解決問題

好，既然知道了問題所在，那麼接下來咱們就開始解決問題

這時候，咱們就要用到懶加載（按需加載）的技術，等用戶須要的時候纔開始加載

修改 /src/index.js 文件內容以下

async function getComponent() {
    const _ = await import('lodash');
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}

document.addEventListener('click', () => {
    getComponent().then((element) => {
        document.body.appendChild(element);
    })
})

由於 lodash 模塊僅在 getComponent 函數中使用，而 getComponent 函數僅在 click 事件後執行

因此咱們能夠將加載 lodash 模塊的代碼放在 getComponent 函數當中

這樣，只有在發生點擊事件以後，纔會去加載 lodash 模塊，從而達到按需加載的效果

總結：懶加載其實並非什麼神奇的技術，只是一種優秀的思想而已，這種思想值得咱們學習

【閱讀更多 webpack 系列文章，請看 webpack學習筆記】