代码分割通过拆分代码并按需加载来优化性能。1. 动态import()支持运行时加载模块,适用于React.lazy等场景;2. Webpack通过entry、SplitChunksPlugin和动态import实现分割,推荐配置splitChunks提取公共代码;3. Vite利用浏览器原生ES模块支持开发时按需加载,生产环境由Rollup自动分割;4. Rollup通过manualChunks或动态import分割,适合库构建,Parcel则原生支持无需配置。选择方案应基于构建工具与项目结构,结合动态import与工具优化,并合理管理依赖以避免过多请求。

JavaScript中的代码分割(Code Splitting)主要用于优化应用加载性能,将代码拆分成更小的块,按需加载。以下是几种常见的实现方案:
1. 动态import()
现代JavaScript支持动态import()语法,可在运行时按需加载模块。它返回一个Promise,适合与异步操作结合使用。示例:
常用于路由级分割,比如在React中配合React.lazy实现组件懒加载。2. Webpack 的代码分割配置
Webpack 提供了多种方式实现代码分割:- 入口起点(entry points):手动配置多个入口文件,生成多个bundle。
- SplitChunksPlugin:自动提取公共代码(如第三方库、共享模块)到独立chunk。
- 动态import:配合动态导入语法,Webpack会自动创建分割点。
3. Vite 中的代码分割
Vite 基于原生ES模块,在开发阶段利用浏览器对import()的支持实现按需加载。生产构建使用Rollup进行静态分析和自动代码分割。- 动态import写法同样生效。
- 共享模块会被自动提取为公共chunk。
4. Rollup 和 Parcel 的支持
Rollup 在打包时通过output.manualChunks或动态import实现分割,适合库的构建。Parcel 原生支持代码分割,无需配置,遇到动态import时自动生成分块。基本上就这些。选择哪种方案取决于你使用的构建工具和项目结构。动态import是通用基础,搭配具体工具的优化策略效果更佳。不复杂但容易忽略的是合理组织模块依赖,避免过度分割带来的请求开销。










