前端懒加载有哪些？

懒加载（Lazy Loading）是一种优化技术，可以延迟加载页面上的资源，直到用户需要它们时才加载。这样可以提高页面加载速度，提升用户体验。

在前端开发中，常见的懒加载方法包括以下几种：

1. 图片懒加载

图片是前端应用中最常见的资源之一，懒加载技术可以在图片进入可视区域时才加载。常见的实现方式有：

• 使用原生 loading="lazy" 属性（HTML5支持）：

  <img src="image.jpg" loading="lazy" alt="Lazy Image">
  

• 使用 JavaScript 库，如 Lozad.js 或 LazyLoad：

  const observer = lozad('.lazy', {
    loaded: function(el) {
      el.classList.add('loaded');
    }
  });
  observer.observe();
  

2. 路由懒加载

在单页面应用（SPA）中，通常使用路由懒加载来优化初始加载时间。路由懒加载可以将路由组件延迟加载，只有当用户访问该路由时才加载该组件。

• 在 Vue.js 中，通常使用动态 import() 语法：

  const routes = [
    {
      path: '/about',
      component: () => import('@/views/About.vue')
    }
  ]
  

• 在 React 中，使用 React.lazy 和 Suspense 来实现懒加载：

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

3. 模块懒加载

对于 JavaScript 模块或库，可以使用 Webpack 的代码分割功能将代码拆分为多个包，并按需加载。这样只加载当前页面所需要的 JavaScript 文件，避免不必要的资源加载。

• 使用 Webpack 的 import() 语法进行动态加载：

  import(/* webpackChunkName: "moduleName" */ './module').then(module => {
    // 使用模块
  });
  

4. CSS懒加载

为了避免加载不必要的 CSS 样式，可以使用懒加载 CSS。通过 JavaScript 控制在特定条件下加载 CSS 文件。

• 使用 JavaScript 动态添加 link 标签来加载外部样式：

  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'style.css';
  document.head.appendChild(link);
  

5. JavaScript 懒加载

如果页面上的某些 JavaScript 资源不是立即需要的，可以等到用户与页面交互时再加载它们。

• 通过监听滚动、点击等事件，按需加载脚本：

  const script = document.createElement('script');
  script.src = 'script.js';
  document.body.appendChild(script);
  

通过这些懒加载技术，可以有效减少初次加载的资源，提升网页的响应速度和用户体验。