前端模块化分析

从模块的定义谈起，模块，又称构件，是能够单独命名并独立完成一定功能的程序语句的集合。
联想一下前端项目中的 package.json 文件中定义的 dependencies 字段。该对象内声明的模块正是独立完成一定功能的集合。但是仅使用这些依赖完成整个项目的开发是完全不够的，所以我们实际代码中还会出现通过 AMD、CommonJS、ES6 Modules 方式组织的文件模块。这些代码被分类存放在不同的目录中。说到这里，一个项目的模块初略可分为引入的三方模块和项目内自定义的文件模块。

模块化分析就是对项目内这两类模块的分析，前提是项目内的模块已被梳理。所以下文描述的正是收集模块的基本信息、分析模块之间的引用关系与频率、分析模块设计的复杂度等。

目标：

• 了解项目内模块的关联关系，为项目优化提供有价值的参考数据。
• 减少项目内冗余和重复代码。
• 降低项目体积。
• 避免相同功能重复开发。

对于模块化可能会带来的代码高度耦合，并带来较多关联错误的问题。无可厚非的是。这个问题往往是模块自身的设计与测试工作做的不到位而引起的。

静态分析

简单的说，就是对源码的词法、语法进行解析，获取 AST 后，在进一步分析数据流、控制流、类型等信息。

重复代码分析

对文件代码块进行相同或类似匹配检查。

工具

• jsinspect
• jscpd

jscpd

Usage: jscpd /path/to/code

例如：在某个小程序项目根目录执行命令。

jscpd -i "miniprogram_npm/**,node_modules/**" -r html -m weak --formats-exts "javascript:js;markup:wxml;css:wxss" ./

Tip：

• 查找完全相同的代码块（代码行）。
• 支持150种语言，且可指定扩展名解析。
• 报告格式：XML、JSON、HTML、Console、Verbose。

jsinspect

Usage: jsinspect [options] <paths ...>

例如：在某个小程序项目根目录执行命令。

jsinspect -I -L -t 40 --ignore "miniprogram_npm|node_modules" ./

Tip：

• 可设置阈值，即扫描不完全相同的代码块。阀值参数 --threshold，值越大，匹配程度越高。
• 报告格式：JSON、XML、Verbose。

依赖分析

分析文件模块之间的引用关系，以及项目实际依赖（package.json）。

工具

• madge，报告示例（svg），支持分析 JS（AMD、CommonJS、ES6 modules）、Style（Sass、Less、Stylus）、NPM 安装包。
• dependency-tree

复杂性分析

代码的环复杂度(Cyclomatic complexity，有的地方又翻译成圈复杂度)是一种代码复杂度的衡量标准，在1976年由Thomas J. McCabe, Sr. 提出。

参考文章：《前端代码质量-圈复杂度原理和实践》

工具

• plato 依赖 complexity-report 数据，新增 lint 解析，进行可视化展示。
• complexity-report 示例报告
• awesome-cli
• js-code-metric

项目分析

未完待续~

目录分析

以前端项目为例，项目在初始化时，经常会新建一些目录，目录名称包括：src、mock、public、test、config、contants、models、services、components、assets、styles、utils 等。从目录名称、层级上，我们能很清晰的了解到项目的组成部分。

核心模块分析

…