Javascript如何进行代码拆分与懒加载？-js教程-PHP中文网

Javascript如何进行代码拆分与懒加载？

幻影之瞳

发布： 2025-12-17 22:50:02

原创

174人浏览过

JavaScript代码拆分与懒加载核心是动态import()，实现按需加载、减小首屏体积；支持路由级、交互级加载及prefetch/preload优化，现代构建工具原生支持。

javascript如何进行代码拆分与懒加载？

JavaScript 的代码拆分与懒加载，核心是用 动态 import() 实现按需加载模块，减少首屏体积、提升加载性能。

把原本静态的 import 改成函数式调用，让模块在运行时才加载：

Webpack、Vite、Rollup 等构建工具会自动识别 import() 并拆出新 chunk，文件名通常带 hash，支持 HTTP 缓存。

在单页应用中，最常见的是路由组件懒加载：

React（配合 Suspense）：const Home = React.lazy(() => import('./pages/Home'))
Vue Router：{ path: '/about', component: () => import('./views/About.vue') }
原生 JS 路由示例：if (path === '/admin') { const Admin = await import('./admin.js'); Admin.init(); }

这样访问 /admin 时才拉取 admin.js，其他用户完全不加载它。

JSON入门指南中文WORD版

JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 的交互。本文将快速讲解 JSON 格式，并通过代码示例演示如何分别在客户端和服务器端进行 JSON 格式数据的处理。

不是所有模块都要等路由跳转，也可以在按钮点击、滚动进入视口、表单提交后加载：

点击弹窗时加载编辑器：button.addEventListener('click', async () => { const Editor = await import('./editor.js'); new Editor().show(); });
图片懒加载 + 组件联动：if (observer.isIntersecting) { await import('./Lightbox.js'); }

注意：避免在循环或高频事件（如 scroll）中直接调用 import()，可加节流或只触发一次。

动态 import 后可以主动提示浏览器提前加载非紧急资源：

import('./analytics.js').then(...) 是普通异步加载
import('./analytics.js').then(...); import('./analytics.js').webpackPrefetch = true;（Webpack）
Vite 中可用 import('./module.js').then(...).catch(...); // vite:preload 注释触发预加载

prefetch 是空闲时低优先级下载，preload 是高优先级提前加载，按场景选择。

基本上就这些。不需要额外库，现代浏览器和主流构建工具都原生支持，关键是把“哪些代码不用一开始就加载”想清楚。

以上就是Javascript如何进行代码拆分与懒加载？的详细内容，更多请关注php中文网其它相关文章！