如何实现third-party libraries第三方库的lazy load懒加载？

以下是不同开发场景下的通用可落地实现方法：

原生JavaScript实现 #

• 动态导入触发加载：使用ES6内置的import()语法，在需要用到第三方库的时机（比如用户交互、滚动到指定区域）再触发加载，避免占用首屏加载资源
  示例代码（点击按钮时才加载lodash）：

  document.querySelector('#calcBtn').addEventListener('click', async () => {
    // 触发点击事件后才请求lodash资源
    const _ = await import('lodash')
    const calcResult = _.sum([1,2,3,4,5])
    console.log(calcResult)
  })
  

• 预加载优化：预判用户即将用到的第三方库，可以通过<link rel="preload">提前预加载资源，不阻塞首屏渲染，实际调用时直接读取缓存即可
  示例代码：

  <link rel="preload" href="https://cdn.example.com/lodash.min.js" as="script">
  

React项目实现 #

• React.lazy + Suspense 配合动态导入：将依赖第三方库的组件封装为懒加载组件，只有组件需要渲染时才会加载对应的依赖库
  示例代码（点击显示图表时才加载ECharts）：

  import { Suspense, lazy, useState } from 'react'
  // 依赖ECharts的图表组件，初始化阶段不加载
  const Chart = lazy(() => import('./ChartComponent'))
  
  function App() {
    const [showChart, setShowChart] = useState(false)
    return (
      <div>
        <button onClick={() => setShowChart(true)}>查看数据图表</button>
        {showChart && (
          <Suspense fallback={<div>图表加载中...</div>}>
            <Chart />
          </Suspense>
        )}
      </div>
    )
  }
  

• 自定义Hook封装：可以封装通用的懒加载工具Hook，按需调用即可
  示例代码：

  function useLazyLoadLib(importFunc) {
    const [lib, setLib] = useState(null)
    const loadLib = async () => {
      const res = await importFunc()
      setLib(res.default || res)
    }
    return [lib, loadLib]
  }
  // 调用示例
  const [quill, loadQuill] = useLazyLoadLib(() => import('quill'))
  

Vue项目实现 #

• 异步组件封装：使用defineAsyncComponent将依赖第三方库的组件定义为异步组件，触发渲染时才加载相关依赖
  示例代码（点击显示地图时才加载地图SDK）：

  <script setup>
  import { defineAsyncComponent, ref } from 'vue'
  const MapComponent = defineAsyncComponent(() => import('./MapComponent.vue'))
  const showMap = ref(false)
  </script>
  
  <template>
    <button @click="showMap = true">查看位置地图</button>
    <MapComponent v-if="showMap" />
  </template>
  

• 路由懒加载：如果第三方库仅在特定路由页面使用，直接将对应路由设置为懒加载即可，进入路由时才会加载页面代码和对应的第三方依赖
  示例代码：

  import { createRouter, createWebHashHistory } from 'vue-router'
  
  const routes = [
    {
      path: '/editor',
      // 进入编辑器路由时才加载富文本库quill
      component: () => import('../views/EditorView.vue')
    }
  ]
  
  const router = createRouter({
    history: createWebHashHistory(),
    routes,
  })
  

注意事项 #

• 构建工具默认支持代码分割功能，主流脚手架（Create React App、Vite、Vue Cli）无需额外配置即可实现动态导入的代码拆分
• 动态导入逻辑建议添加catch异常捕获，处理网络异常导致的资源加载失败场景，给用户友好的重试提示
• 可以使用打包分析工具查看第三方库的体积，对超过500KB的大型第三方库做二次拆分，避免单个分包体积过大

内容的提问来源于stack exchange，提问作者Balaji D