JS 惰性加载与代码分割：提升前端应用性能与用户体验

呦，各位观众老爷们，欢迎来到今天的“前端性能优化脱口秀”！我是你们的老朋友，人称“代码界郭德纲”的JS老司机。今天咱不聊相声，聊点干货——JS的惰性加载和代码分割。

咱们前端开发啊，最怕的就是用户体验差。一个页面半天刷不出来，那用户直接就拜拜了，谁还跟你耗着？所以，性能优化是王道。而惰性加载和代码分割，就是优化性能的两把利剑，能让你的网站飞起来！

第一部分：惰性加载，磨刀不误砍柴工

啥是惰性加载？简单来说，就是“用到的时候再加载”。就像你点外卖，饿了才点，没饿着就先玩手机。

想象一下，你的网页上有100张图片，用户一打开页面，浏览器吭哧吭哧地把这100张图片全加载下来。用户可能只看了前几张，后面的图片就浪费了。这不就相当于你点了100个鸡腿，结果只吃了两个，剩下的都凉了。

惰性加载就是解决这个问题的。它会先加载可视区域内的图片，当用户滚动到其他区域时，再加载相应的图片。这样可以减少首次加载时的资源请求，提高页面加载速度。

1.1 几种常见的惰性加载方式

• 纯JS实现：

  这种方式比较灵活，可以自定义加载逻辑。核心思想是监听scroll事件，判断元素是否进入可视区域。

  function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
  
  function lazyLoadImages() {
    const images = document.querySelectorAll('img[data-src]'); // 选择所有带有 data-src 属性的 img 标签
    images.forEach(img => {
      if (isElementInViewport(img)) {
        img.src = img.dataset.src; // 将 data-src 的值赋给 src
        img.removeAttribute('data-src'); // 移除 data-src 属性，避免重复加载
      }
    });
  }
  
  // 监听 scroll 事件
  window.addEventListener('scroll', lazyLoadImages);
  
  // 页面加载完成后执行一次
  document.addEventListener('DOMContentLoaded', lazyLoadImages);

  代码解释：

  • isElementInViewport(el)：判断元素是否在可视区域内。
  • lazyLoadImages()：遍历所有带有data-src属性的img标签，如果图片在可视区域内，则将data-src的值赋给src，并移除data-src属性。
  • window.addEventListener('scroll', lazyLoadImages)：监听scroll事件，当页面滚动时执行lazyLoadImages()函数。
  • document.addEventListener('DOMContentLoaded', lazyLoadImages)：页面加载完成后执行一次lazyLoadImages()函数，确保首屏图片能够加载。

  使用方法：

  <img data-src="image1.jpg" alt="Image 1">
  <img data-src="image2.jpg" alt="Image 2">
  <img data-src="image3.jpg" alt="Image 3">

  注意：data-src是一个自定义属性，用于存储图片的真实地址。

• Intersection Observer API：

  这是一个更现代、更高效的API，可以异步监听元素是否进入可视区域。它避免了频繁监听scroll事件带来的性能问题。

  const images = document.querySelectorAll('img[data-src]');
  
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
        observer.unobserve(img); // 停止监听已加载的图片
      }
    });
  });
  
  images.forEach(img => {
    observer.observe(img);
  });

  代码解释：

  • new IntersectionObserver((entries, observer) => { ... })：创建一个IntersectionObserver实例，并传入一个回调函数。
  • entries：一个数组，包含所有被监听的元素的IntersectionObserverEntry对象。
  • entry.isIntersecting：判断元素是否与根元素相交（即是否进入可视区域）。
  • observer.unobserve(img)：停止监听已加载的图片，避免重复加载。
  • observer.observe(img)：开始监听img元素。

  使用方法与纯JS实现类似，也是使用data-src属性。

• 使用第三方库：

  有很多优秀的第三方库可以帮助你实现惰性加载，比如lozad.js、react-lazyload等。这些库通常提供了更丰富的功能和更好的性能。

  例如，使用lozad.js：

  <img class="lozad" data-src="image1.jpg" alt="Image 1">
  <img class="lozad" data-src="image2.jpg" alt="Image 2">
  <img class="lozad" data-src="image3.jpg" alt="Image 3">
  
  <script src="lozad.min.js"></script>
  <script>
    const observer = lozad(); // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
    observer.observe();
  </script>

  只需要引入lozad.js，添加class="lozad"，并初始化lozad对象即可。

1.2 惰性加载的适用场景

• 图片多的页面： 比如电商网站的商品列表页、图片瀑布流等。
• 长页面： 比如博客文章、新闻页面等。
• 视频： 视频文件通常比较大，可以使用惰性加载，只在用户点击播放按钮时才加载视频。
• iframe： iframe也会阻塞页面加载，可以使用惰性加载，只在用户滚动到iframe区域时才加载。

1.3 惰性加载的注意事项

• 首屏内容： 确保首屏内容能够快速加载，不要对首屏内容进行惰性加载。
• SEO： 确保搜索引擎能够抓取到惰性加载的内容。可以使用noscript标签，在noscript标签中提供图片的真实地址。
• 用户体验： 在图片加载过程中，可以使用占位符，避免页面出现空白。

第二部分：代码分割，化整为零，各个击破

代码分割，顾名思义，就是将一个大的JavaScript文件分割成多个小的文件。就像把一个大西瓜切成小块，吃起来更方便。

为什么要代码分割？因为一个大的JavaScript文件会阻塞页面的渲染，导致页面加载速度变慢。而将代码分割成多个小的文件，可以按需加载，减少首次加载时的资源请求，提高页面加载速度。

2.1 几种常见的代码分割方式

• 手动分割：

  这种方式比较简单，但需要手动管理模块之间的依赖关系。

  例如，将一个大的app.js文件分割成module1.js、module2.js和app.js三个文件。

  <script src="module1.js"></script>
  <script src="module2.js"></script>
  <script src="app.js"></script>

  这种方式适用于简单的项目，但不适用于大型项目，因为手动管理模块之间的依赖关系非常麻烦。

• Webpack、Rollup等打包工具：

  这些打包工具可以自动分析模块之间的依赖关系，并将代码分割成多个小的文件。这是目前最常用的代码分割方式。

  Webpack的代码分割：

  Webpack提供了多种代码分割的方式：

  • Entry Points： 通过配置多个入口点，可以将不同的模块打包成不同的文件。

    // webpack.config.js
    module.exports = {
      entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
      },
      output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };

    这样会将app.js和vendors.js分别打包成app.bundle.js和vendors.bundle.js两个文件。

  • SplitChunksPlugin： 可以将公共模块提取出来，打包成一个单独的文件。

    // webpack.config.js
    module.exports = {
      optimization: {
        splitChunks: {
          chunks: 'all', // 提取所有类型的 chunk，包括：initial (初始块)、async (按需加载块) 和 all (全部块)
          cacheGroups: {
            vendors: {
              test: /[\/]node_modules[\/]/, // 匹配 node_modules 中的模块
              priority: -10, // 优先级，数值越大优先级越高
              name: 'vendors', // 打包后的文件名
            },
            default: {
              minChunks: 2, // 最小引用次数，只有被引用 2 次以上的模块才会被提取
              priority: -20,
              reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
            },
          },
        },
      },
    };

    SplitChunksPlugin会将node_modules中的模块打包成vendors.bundle.js文件，并将被多个模块引用的公共模块提取出来。

  • 动态导入（Dynamic Imports）： 可以使用import()语法，按需加载模块。

    // app.js
    button.addEventListener('click', () => {
      import('./module.js')
        .then(module => {
          module.default();
        })
        .catch(err => {
          console.error('Failed to load module', err);
        });
    });

    import('./module.js')会返回一个Promise对象，当模块加载完成后，会执行then()方法。这种方式可以实现按需加载，减少首次加载时的资源请求。

• React.lazy 和 Suspense：

  在React中，可以使用React.lazy和Suspense组件来实现代码分割。

  import React, { Suspense } from 'react';
  
  const MyComponent = React.lazy(() => import('./MyComponent'));
  
  function App() {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    );
  }

  React.lazy(() => import('./MyComponent'))会返回一个Promise对象，当组件加载完成后，会渲染MyComponent组件。Suspense组件用于显示加载状态，当组件加载过程中，会显示fallback属性指定的组件。

2.2 代码分割的适用场景

• 大型单页应用（SPA）： SPA通常包含大量的代码，可以使用代码分割，将不同的路由或功能模块打包成不同的文件。
• 多页面应用（MPA）： MPA也可以使用代码分割，将公共模块提取出来，打包成一个单独的文件。
• 第三方库： 可以将不常用的第三方库进行代码分割，按需加载。

2.3 代码分割的注意事项

• 模块依赖： 确保模块之间的依赖关系正确，避免出现循环依赖。
• 缓存： 合理配置缓存策略，避免重复加载。可以使用Webpack的[contenthash]，根据文件内容生成hash值，当文件内容发生变化时，hash值也会发生变化，从而避免缓存问题。
• 网络请求： 代码分割可能会增加网络请求的数量，需要权衡利弊。

第三部分：惰性加载与代码分割的结合

惰性加载和代码分割可以结合使用，以达到更好的性能优化效果。

例如，可以使用代码分割将一个大的组件分割成多个小的组件，然后使用惰性加载，只在用户需要时才加载这些组件。

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      {/* 其他内容 */}
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

这样可以减少首次加载时的资源请求，提高页面加载速度，并减少不必要的代码加载。

第四部分：总结

惰性加载和代码分割是前端性能优化的重要手段，可以有效提高页面加载速度，改善用户体验。

技术	优点	缺点	适用场景
惰性加载	减少首次加载时的资源请求，提高页面加载速度	需要监听scroll事件或使用Intersection Observer API，有一定的开发成本	图片多的页面、长页面、视频、iframe
代码分割	减少首次加载时的JavaScript文件大小，提高页面加载速度	需要配置打包工具，有一定的学习成本	大型单页应用（SPA）、多页面应用（MPA）、第三方库
结合使用	在代码分割的基础上，使用惰性加载，可以达到更好的性能优化效果	需要同时掌握惰性加载和代码分割的技术，有一定的开发成本	需要极致性能优化的页面

当然，性能优化是一个持续的过程，需要不断学习和实践。希望今天的“前端性能优化脱口秀”能对你有所帮助。

好了，今天的表演就到这里，感谢各位观众老爷的捧场！咱们下次再见！