webpack4.29.x成神之路（十八） 懶加載

目錄

上節： 代碼分割(code spliting)下

上節目錄以下：

其實在代碼分割時已經用過懶加載了，src/index.js內容以下：

function getComponent() {
  const element = document.createElement('div');
  return import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
    const element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
  }).catch(error => 'An error occurred while loading the component');
}


// 按需加載，當點擊了頁面，纔會引入lodash，也是單頁應用路由懶加載的實現原理
window.addEventListener('click', function(){
 getComponent().then(component => {
    document.body.appendChild(component);
  })
});

npm run build看生成的文件：

這三個文件將被用於瀏覽器，如今運行index.html打開f12:

若是不點擊頁面，就不會加載lodash文件，如今點擊一下頁面：

頁面上出現hello webpack而且加載了lodash文件，這就是懶加載（按需加載 | 異步加載）

下節：css代碼分隔