🪴qql1's digital garden

Home

❯

笔记

❯

计算机知识

❯

app应用

❯

webAPP

❯

前端

❯

代码分割

代码分割

2026年1月26日1分钟阅读

  • 组件化-模块化
  • 懒加载-动态导入
  • 编译时-(电脑-PC-桌面端-计算机)静态
  • 打包-package-build
  • 运行时-(电脑-PC-桌面端-计算机)动态
  • 前端-dom-bom/(前端-dom-bom)Ts-(前端-dom-bom)Typescript/(前端-dom-bom)Js-(前端-dom-bom)JavaScript-ES-ECMAScript/ES6-ECMAScript6
  • (电脑-PC-桌面端-计算机)应用-软件-程序-app/代码-code
  • 文件-文档-txt文件-笔记
  • 分割-分离-切片-划分-截取-拆分-分裂-分散
  • 网站-网页端-web端-web应用-webAPP
  • ES模块化-ES6模块化-ESM-ESModule
  • typescript-ts/(前端-dom-bom)Ts-(前端-dom-bom)Typescript
  • 开发-构建-搭建-创建
  • 创建-新建-创造

作用

  • 将js代码分割成细颗粒的js文件(静态资源), 这样方便给html引用

打包工具实现懒加载

像 Rollup (Vite 就是基于它之上开发的) 或者 webpack 这样的打包工具可以通过分析 ESM 动态导入的语法来自动进行代码分割:

// lazy.js 及其依赖会被拆分到一个单独的文件中
// 并只在 `loadLazy()` 调用时才加载
function loadLazy() {
  return import('./lazy.js')
}

关系图谱

  • 作用
  • 打包工具实现懒加载

反向链接

  • 代码分割
  • 分包

Created with Quartz v4.5.2 © 2026

  • GitHub
  • Discord Community