首先使用VS Code插件统计代码行数，通过安装CodeMetrics等工具执行命令获取总行数、注释行数及文件分布；其次利用webpack-bundle-analyzer分析前端项目体积，需安装并配置插件以可视化方式展示各模块大小占比；最后可通过编写Node.js脚本自定义统计功能，遍历文件目录计算指定类型文件的行数与总体积。
如果您在使用HTML编辑器进行项目开发时，希望了解项目的代码规模或分析资源占用情况，可能需要借助特定工具来统计代码行数或分析项目文件体积。以下是实现这一目标的具体方法：
本文运行环境：MacBook Pro，macOS Sonoma
一、使用VS Code插件统计代码行数
Visual Studio Code作为主流的HTML编辑器之一，支持通过安装扩展插件来快速统计项目中的代码总量。这类插件能够扫描指定目录下的所有源文件并生成详细的统计报告。
1、打开VS Code编辑器，进入左侧活动栏的“扩展”面板。
立即学习“前端免费学习笔记（深入）”；
2、搜索关键字Code Metrics或Lines of Code相关插件。
3、选择评分较高的插件如“CodeMetrics”或“vscode-linecount”，点击“安装”。
4、安装完成后，在命令面板（Ctrl+Shift+P）中输入“Count Lines of Code”，执行统计命令。
5、插件将在输出窗口显示总行数、空行数、注释行数及文件分布详情。
二、利用Webpack Bundle Analyzer分析项目体积
对于包含打包流程的HTML前端项目，可通过集成webpack-bundle-analyzer插件可视化地分析输出资源的体积构成，帮助识别大尺寸模块。
1、确保项目已安装webpack和webpack-cli，若未安装，运行命令npm install --save-dev webpack webpack-cli。
2、执行命令npm install --save-dev webpack-bundle-analyzer进行插件安装。
3、在webpack配置文件（如webpack.config.js）的plugins数组中添加new BundleAnalyzerPlugin()引用。
4、完成配置后运行npm run build，构建结束后系统将自动打开浏览器窗口展示依赖图谱。
5、图形界面中以树状结构呈现各模块体积占比，可逐层展开查看具体文件大小。
三、使用Node.js脚本自定义代码统计功能
当需要灵活控制统计规则时，可编写轻量级Node.js脚本遍历项目文件目录，按需过滤文件类型并计算总行数与文件大小。
1、在项目根目录创建名为“stats.js”的新文件。
2、引入fs和path核心模块，并定义目标文件夹路径与扩展名过滤列表（如.html、.js、.css）。
3、编写递归函数读取目录下所有文件，对匹配类型的文件逐行读取并累加非空行计数。
4、使用fs.statSync获取每个文件的size属性值，汇总得出项目源码总体积（单位字节）。
5、运行node stats.js命令执行脚本，终端将输出分类统计结果。
