webpack 不直接限制 typescript 源文件大小，而是通过 performance 预算对打包后的 js/css 资源体积设阈值（如 maxassetsize、maxentrypointsize），超限可警告或报错；该机制适用于 ts 项目，因编译后产物参与 chunk 构建，需配合 splitchunks、tree-shaking 等优化措施。
Webpack 本身不直接提供“TypeScript 单文件大小限制”的功能，但它支持通过 性能预算（performance budget） 机制，对打包后输出的 chunk、asset（如 JS/CSS 文件）大小 进行阈值告警或报错。这个能力适用于 TypeScript 项目，因为最终打包产物仍是 JavaScript 资源，而 TypeScript 源码经过 ts-loader 或 babel-loader 编译后，会参与 Webpack 的模块图构建与 chunk 分割。
关键点在于：你限制的是构建产物（如 .js chunk）的体积，不是 .ts 源文件大小。但实践中，过大 chunk 往往源于未拆分的巨型 TS 模块（如一个 5MB 的 index.ts），所以设置合理预算能倒逼代码组织优化。
? 启用 performance 预算配置
在 webpack.config.js 中添加 performance 字段：
module.exports = {
// ...其他配置
performance: {
hints: 'warning', // 或 'error'（超限时中断构建）
maxAssetSize: 250000, // 单个资源（如 .js/.css）最大字节：250KB
maxEntrypointSize: 500000, // 入口 chunk 总和上限：500KB
}
};
-
maxAssetSize：控制单个输出文件（如main.abc123.js、vendor.css）大小 -
maxEntrypointSize：控制一个入口（如entry: './src/index.ts'）所生成的所有初始 chunk 总体积 -
hints: 'error'时，超限会直接导致webpack build失败，适合 CI 环境强约束
✅ TypeScript 项目无需额外适配 —— 只要你的
.ts文件被正常编译进 bundle，它就受此规则约束。
? 常见触发场景（TS 项目中需警惕）
以下写法容易导致单文件体积超标，触发 performance 提示：
- 把大量业务逻辑/第三方库（如
xlsx,pdfjs-dist）直接 import 到主入口，未做 code split - 在
.ts中import * as hugeLib from 'huge-library'且未启用 tree-shaking（如未设"sideEffects": false） - 使用
require.context动态加载大量模块，合并进同一 chunk - 未开启
splitChunks，所有依赖被打包进main.js
✅ 推荐配套优化措施
为让 performance 预算真正起效并可维护，建议同步配置：
-
启用代码分割（避免单 chunk 膨胀）：
optimization: { splitChunks: { chunks: 'all', maxSize: 200000, // 强制 >200KB 的 chunk 再拆分（配合 performance 更精准） } } -
开启 Terser 压缩 + source map 控制（减小实际体积）：
optimization: { minimize: true, minimizer: [new TerserWebpackPlugin({ terserOptions: { compress: { drop_console: true } } })], }, devtool: isProduction ? 'source-map' : 'eval-source-map', // 生产环境慎用 large sourcemap -
检查大依赖是否真被使用（TS 层面）：
- 用
import type替代import声明仅用于类型的位置 - 对大型工具库（如
lodash）改用按需导入：import debounce from 'lodash/debounce' - 在
tsconfig.json中启用"importsNotUsedAsValues": "error"防止误引入
- 用
? 注意：这不是源码级限制
Webpack 的 performance 不会扫描 .ts 文件本身大小（比如 utils.ts 是 800KB 还是 8KB），它只检测最终输出的 asset。若你真想监控源码体积，需借助 ESLint 插件（如 eslint-plugin-file-size）或自定义脚本，但这属于代码规范层，不属于 Webpack 构建流程。
不复杂但容易忽略
