javascript_如何实现代码分割-js教程-PHP中文网

javascript_如何实现代码分割

夢幻星辰

发布： 2025-12-03 17:19:34

原创

276人浏览过

代码分割通过拆分脚本按需加载提升性能。使用动态import实现异步加载，结合Webpack等工具自动生成分块，支持路由级分割、第三方库分离和条件加载。React中可用lazy+Suspense实现组件懒加载，并通过webpackPrefetch预加载模块，优化用户体验。配置splitChunks可提取公共代码，增强缓存复用。合理分块能显著减少初始加载时间。

javascript_如何实现代码分割

JavaScript 中的代码分割主要是为了优化网页加载性能，把过大的脚本文件拆分成更小的块，按需加载。这样可以减少初始加载时间，提升用户体验。实现方式主要依赖现代构建工具和语言特性。

使用动态 import()

动态 import() 是实现代码分割最常用的方式。它返回一个 Promise，可以在需要时异步加载模块。

例如：

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

登录后复制

上面这段代码中，module.js 只有在用户点击按钮时才会被加载，而不是页面初始化时就加载。

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

结合 Webpack、Vite 等构建工具

像 Webpack 和 Vite 这类工具原生支持基于动态 import 的代码分割，无需额外配置即可自动生成分块文件。

常见场景包括：

路由级分割：在单页应用中，每个路由对应的组件单独打包
第三方库分离：将 react、lodash 等大库单独打包，利于缓存复用
条件加载：根据设备或用户权限加载不同功能模块

以 React + Webpack 为例：

const About = lazy(() => import('./About'));
<p>function App() {
return (
<Routes>
<Route path="/about" element={<Suspense fallback="加载中..."><About /></Suspense>} />
</Routes>
);
}</p>

登录后复制

这里 lazy 配合动态 import 实现了路由组件的懒加载，Webpack 会自动为其创建独立的 chunk。

html5动态显示媒体视频播放器代码

html5动态显示媒体视频播放器代码,这个我们在企业网站或者教学网站会用到，教学网站，有一些视频要播放，那么就会用到播放器，可以参考源码，看看播放器的效果是如何实现的，php中文网推荐下载！

101

查看详情

预加载与预获取提示

为了进一步优化体验，可以使用 webpackPrefetch 或 webpackPreload 告诉浏览器提前下载某些模块。

语法示例：

import(/* webpackPrefetch: true */ './modal.js');

登录后复制

这会在空闲时加载 modal.js，适合后续可能用到的功能。生成的 script 标签会包含 rel="prefetch"，由浏览器决定何时下载。

手动分割公共代码

如果多个页面共用相同依赖，可通过配置提取公共模块。

以 Webpack 为例，在配置中设置：

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\/]node_modules[\/]/,
        name: 'vendors',
        chunks: 'all',
      }
    }
  }
}

登录后复制

这样所有来自 node_modules 的模块会被打包进 vendors.chunk.js，便于长期缓存。

基本上就这些。代码分割不复杂但容易忽略，合理使用能显著提升首屏速度。关键是按需加载、分块清晰、结合构建工具发挥最大效果。

以上就是javascript_如何实现代码分割的详细内容，更多请关注php中文网其它相关文章！