files/zh-cn/glossary/code_splitting/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

---
title: 代码分割
slug: Glossary/Code_splitting
tags:
  - Glossary
  - Reference
  - Web Performance
  - code splitting
  - latency
translation_of: Glossary/Code_splitting
---
<p><span class="seoSummary"><strong>代码分割（Code splitting ）</strong>是将代码划分为可以按需/同时加载的多个 bundles 或组件。</span></p>

<p>随着应用程序日趋复杂，或仅是对其进行简单的维护，CSS 和 JavaScripts 文件以及 bundles 的大小都会随之增加，尤其是所包含的第三方库的数量和大小的增长。为了避免下载巨大的文件，可以将脚本拆分为多个较小的文件。当前页面所需的代码能够立即加载，而另外的脚本可以在与页面或应用交互后懒加载（<a href="/en-US/docs/Glossary/Lazy_load">lazy loaded</a>），页面性能因此提升。虽然代码的总量仍然相同（甚至可能大了几个字节），但是初次加载所需的代码数量减少了。</p>

<p>代码分割是由 <a href="https://webpack.js.org/">Webpack</a> 和 <a href="http://browserify.org/">Browserify</a> 等打包工具所支持的一项功能，这些打包工具能够创建在运行时动态加载的多个 bundles。</p>

<h2 id="另请参见">另请参见</h2>

<ul>
 <li>Bundling</li>
 <li><a href="/en-US/docs/Learn/Performance/Lazy_loading">Lazy loading</a></li>
 <li><a href="/en-US/docs/Glossary/HTTP_2">HTTP/2</a></li>
 <li><a href="/en-US/docs/Glossary/Tree_shaking">Tree shaking</a></li>
</ul>