1. 引言
在开发现代 Web 应用程序时，JavaScript 成为了开发的主要语言，
但是随着应用程序的不断增长和发展，JavaScript 包的大小也在不断增加。
这时，我们如何有效地优化 JavaScript 包的大小，以便获得更好的性能呢？
本文将介绍两种优化 JavaScript 包大小的策略，即代码分割和延迟加载。
2. 代码分割
代码分割是一种通过将应用程序代码拆分成小块来减小打包文件大小的方法。
通过代码分割，可以使得每个页面只加载所需的代码块，从而提高页面加载速度。
2.1. 动态导入
动态导入是一种通过代码拆分来优化 JavaScript 包的方法，
它允许开发者在运行时根据需要动态地加载 JavaScript 模块。
Webpack 4 之前，Code Splitting 的 API 为 require.ensure()。
而从 Webpack 4 开始，require.ensure() 被 import() 语法取代。
function onClick() {
import('./module.js').then(module => {
// 使用 module
});
}
在上面的代码中，当按钮被点击时，Webpack 会异步地加载 module.js。
2.2. 懒加载
懒加载是一种代码分割策略，即在页面滚动到某个区域时再加载其所需要的代码块。
懒加载可以减少初始加载时所需要的资源，从而提高页面加载速度。
function lazyLoad() {
let img = document.createElement('img');
img.src = 'lazy-img.jpg';
document.body.appendChild(img);
}
window.addEventListener('scroll', () => {
if (window.scrollY > 400) {
lazyLoad();
}
});
在上面的代码中，当页面滚动到 400 像素时，会执行 lazyLoad() 函数从而实现图片的懒加载。
3. 延迟加载
延迟加载是一种通过将需要加载的资源延迟到浏览器需要时再加载的方式来优化应用程序性能的方法。
延迟加载可以减少初始加载时所需要的资源，从而提高页面加载速度。
3.1. defer 和 async 属性
defer 和 async 是 HTML5 中用于异步加载 JavaScript 脚本的标签属性。它们的作用是将页面的解析与 JavaScript 的加载分离开来，并且它们都可以减少 JavaScript 脚本对页面加载的影响。
3.1.1. defer 属性
defer 属性用于告诉浏览器在页面加载完成后再执行 JavaScript 脚本。
当 defer 脚本被运行时，文档已经完成解析，但是 DOM 仍未完成构建。
<script defer src="script.js"></ script>
3.1.2. async 属性
async 属性用于告诉浏览器在下载 JavaScript 脚本时不必等待其他资源或 JavaScript 脚本的加载，从而异步地加载 JavaScript 脚本。
当 async 脚本被运行时，文档可能尚未完成解析，DOM 仍未完成构建并且其他资源仍然在下载中。
<script async src="script.js"></ script>
3.1.3. 区别
defer 和 async 的主要区别在于脚本执行的时间。
defer 脚本会在页面解析完成后执行，而 async 脚本会在页面加载完成后尽快执行。
3.2. 图片的延迟加载
图片的延迟加载是指在图片即将出现在视窗中时才开始加载图片，
这一技术可以大大提高页面的速度，同时减少服务器的负担。
实现图片的延迟加载通常有两种方法：
3.2.1. Intersection Observer
Intersection Observer 是一个 JavaScript API，用于异步观察目标元素与其祖先容器或 viewport 的交叉状态。
当被观察的元素发生变化时，Intersection Observer 会通知它的监听器。
let images = document.querySelectorAll('img[data-src]');
function lazyLoadImage(image) {
let src = image.getAttribute('data-src');
if (src) {
image.setAttribute('src', src);
image.removeAttribute('data-src');
}
}
let options = {
rootMargin: '50px',
threshold: 0.01
}
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
lazyLoadImage(entry.target);
observer.unobserve(entry.target);
}
})
}, options);
images.forEach(image => {
observer.observe(image);
});
3.2.2. LazySizes
LazySizes 是一个轻量级的插件，可以通过将图片的 src 属性替换为特殊的 data-src 属性来实现图片的延迟加载。
<img class="lazyload" data-src="image.jpg" alt="Image">
4. 总结
本文介绍了两种优化 JavaScript 包大小的策略，即代码分割和延迟加载。
代码分割可以使得每个页面只加载所需的代码块，从而提高页面加载速度。
延迟加载可以通过延迟加载非关键资源来加快页面加载速度和响应时间。