JavaScript代码分割_动态导入与懒加载-js教程-PHP中文网

JavaScript代码分割_动态导入与懒加载

betcha

发布： 2025-11-24 18:17:02

原创

626人浏览过

代码分割是将大JS文件拆分为小chunk按需加载，提升首屏性能。通过Webpack或Vite支持的入口分割、公共代码提取和动态import()实现懒加载，适用于路由组件、弹窗等非立即使用模块。React中结合lazy与Suspense可实现路由级懒加载，注意避免过度拆分、合理利用prefetch并处理加载错误。动态路径需静态可分析，不可完全动态。

javascript代码分割_动态导入与懒加载

在现代前端开发中，JavaScript 的代码分割和动态导入是提升应用性能的重要手段。尤其当项目体积变大时，一次性加载所有脚本会拖慢首屏渲染速度。通过动态导入和懒加载，我们可以按需加载模块，减少初始加载时间，优化用户体验。

什么是代码分割？

代码分割是指将一个大的 JavaScript 打包文件拆分成多个较小的 chunk，然后根据需要加载这些 chunk。Webpack、Vite 等构建工具都支持自动代码分割。

常见方式包括：

入口点分割：通过配置多个 entry 设置手动分割
依赖公共分割：提取三方库等公共代码（如 vendor chunk）
动态导入分割：使用 import() 实现按需加载

动态导入（Dynamic Imports）

ES2020 引入了动态 import() 语法，它返回一个 Promise，允许我们在运行时动态加载模块。

立即学习“Java免费学习笔记（深入）”；

示例：

button.addEventListener('click', () => {
  import('./module.js')
    .then(module => {
      module.default();
    })
    .catch(err => {
      console.error('加载失败', err);
    });
});

登录后复制

点击按钮时才加载 module.js，对应的代码会被打包成独立的 chunk。

疯狂翻译师App

支持屏幕、图片、视频字幕、文档、漫画等多种翻译，准确率高，操作简单。

104

查看详情

懒加载的应用场景

懒加载适合用于那些不是立即需要的模块，比如：

路由组件：在单页应用中，不同页面的组件可按路由拆分
模态框或弹窗逻辑：用户触发时再加载
重型工具库：如图表库、富文本编辑器等

以 React 路由为例：

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

登录后复制

每个页面组件都会被打包为单独文件，访问对应路径时才加载。