webpack429x成神之路十八-懒加载

目录

上节：代码分割 (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 代码分隔（待更新）