【webpack5修行之道】第13篇：性能优化-懒加载和预加载

jay_mw

于 2021-06-18 09:47:01 发布

阅读量481

点赞数 1

分类专栏： webpack 文章标签： node.js webpack 前端

本文链接：https://blog.youkuaiyun.com/j178202798/article/details/117305130

版权

本文介绍了webpack5中如何实现性能优化，包括懒加载和预加载技术。通过实例展示了如何配置懒加载使得math.js在点击按钮时按需加载，以及预加载策略使得math.js在所有资源加载后提前请求，利用浏览器空闲时间提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇：【webpack5修行之道】第12篇：性能优化-代码分隔

懒加载

修改index.html，添加一个按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <button id="btn">按钮</button>
</body>
</html>

修改index.js，webpackChunkName能够指定chunk的名字

console.log('index.js 被加载了')

document.getElementById('btn').onclick = () => {

   import( /* webpackChunkName: 'mathfile' */'./math.js').then(({say})=>