首先使用 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 命令执行脚本，终端将输出分类统计结果。
