分析web应用内引用依赖的占比

无刺鱼米饭

背景

1. 针对目前团队自己开发的组件库，对当前系统内引用组件库占比进行统计分析，以实现对当前进度的总结以及后续的覆盖度目标制定。

复制代码

主要思路

目前找到的webpack分析插件，基本都是针对打包之后的分析打包之后的chunk进行分析，但是我希望的是分析每个页面中的import数，对比一下在所有页面中的import数中有多少是使用了组件库的。所以就在网上看了一些相关资料以及webpack的api文档。主要是利用webpack的importCall、import、importSpecifier三个钩子来实现，它们的作用直接跟着代码看一下。
完整代码实现

1. import fs from 'fs';
2. import path from 'path';
3. import resolve from 'enhanced-resolve';
5. let myResolve;
7. /**
8. * 通过source获取真实文件路径
9. * @param parser
10. * @param source
11. */
12. function getResource(parser, source) {
13.   if (!myResolve) {
14.     myResolve = resolve.create.sync(parser.state.options.resolve);
15.   }
16.   let result = '';
17.   try {
18.     result = myResolve(parser.state.current.context, source);
19.   } catch (err) {
20.     console.log(err);
21.   } finally {
22.     return result;
23.   }
24. }
26. class WebpackImportAnalysisPlugin {
27.   constructor(props) {
28.     this.pluginName = 'WebpackCodeDependenciesAnalysisPlugin';
29.     //  文件数组
30.     this.files = [];
31.     //  当前编译的文件
32.     this.currentFile = null;
33.     this.output = props.output;
34.   }
36.   apply(compiler) {
37.     compiler.hooks.compilation.tap(this.pluginName, (compilation, { normalModuleFactory }) => {
38.       const collectFile = parser => {
39.         const { rawRequest, resource } = parser.state.current;
40.         if (resource !== this.currentFile) {
41.           this.currentFile = resource;
42.           this.files.push({
43.             name: rawRequest,
44.             resource,
45.             children: []
46.           });
47.         }
48.       };
49.       const handler = parser => {
50.         // 用来捕获import(xxx)
51.         parser.hooks.importCall.tap(this.pluginName, expr => {
52.           collectFile(parser);
53.           let ast = {};
54.           const isWebpack5 = 'webpack' in compiler;
55.           // webpack@5 has webpack property, webpack@4 don't have the property
56.           if (isWebpack5) {
57.             // webpack@5
58.             ast = expr.source;
59.           } else {
60.             //webpack@4
61.             const { arguments: arg } = expr;
62.             ast = arg[0];
63.           }
64.           const { type, value } = ast;
65.           if (type === 'Literal') {
66.             const resource = getResource(parser, value);
67.             this.files[this.files.length - 1].children.push({
68.               name: value,
69.               resource,
70.               importStr: `import ('${value}')`
71.             });
72.           }
73.         });
74.         // 用来捕获 import './xxx.xx';
75.         parser.hooks.import.tap(this.pluginName, (statement, source) => {
76.           // 由于statement.specifiers.length大于0的时候同时会被importSpecifier钩子捕获，所以需要在这个地方拦截一下，这个地方只处理单独的引入。
77.           if (statement.specifiers.length > 0) {
78.             return;
79.           }
80.           collectFile(parser);
81.           this.files[this.files.length - 1].children.push({
82.             name: source,
83.             resource: getResource(parser, source),
84.             importStr: `import '${source}'`
85.           });
86.         });
87.         // 用来捕获 import xx from './xxx.xx';
88.         parser.hooks.importSpecifier.tap(
89.           this.pluginName,
90.           (statement, source, exportName, identifierName) => {
91.             collectFile(parser);
92.             let importStr = '';
93.             if (exportName === 'default') {
94.               importStr = `import ${identifierName} from '${source}'`;
95.             } else {
96.               if (exportName === identifierName) {
97.                 importStr = `import { ${identifierName} } from '${source}'`;
98.               } else {
99.                 importStr = `import { ${exportName}: ${identifierName} } from '${source}'`;
100.               }
101.             }
102.             this.files[this.files.length - 1].children.push({
103.               name: source,
104.               exportName,
105.               identifierName,
106.               importStr,
107.               resource: getResource(parser, source)
108.             });
109.           }
110.         );
111.       };
113.       normalModuleFactory.hooks.parser.for('javascript/auto').tap(this.pluginName, handler);
114.     });
116.     compiler.hooks.make.tap(this.pluginName, compilation => {
117.       compilation.hooks.finishModules.tap(this.pluginName, modules => {
118.         // 过滤掉深度遍历的node_modules中的文件，只分析业务代码中的文件
119.         const needFiles = this.files.filter(
120.           item => !item.resource.includes('node_modules') && !item.name.includes('node_modules')
121.         );
122.         fs.writeFile(this.output ?? path.resolve(__dirname, 'output.json'), JSOn.stringify(needFiles, null, 4), err => {
123.           if (!err) {
124.             console.log(`${path.resolve(__dirname, 'output.json')}写入完成`);
125.           }
126.         });
127.       });
128.     });
129.   }
130. }
132. export default WebpackImportAnalysisPlugin;

复制代码

1. // 以文件为基准，扁平化输出所有的import
2. [
3.   {
4.     "name": "./src/routes",
5.     "resource": "/src/routes.tsx",
6.     "children": [
7.       {
8.         "name":"react",
9.         "exportName":"lazy",
10.         "identifierName":"lazy",
11.         "importStr":"import { lazy } from 'react'",
12.         "resource":"/node_modules/.pnpm/react@17.0.2/node_modules/react/index.js"
13.       },
14.     ...  
15.     ]
16.   },
17.   ...
18. ]

复制代码

后续

上面拿到的数据是扁平化的数据，如果针对需要去分析整体的树状结构，可以直接将扁平化数据处理一下，定义一个主入口去寻找它的子级，这样可以自己去生成一颗树状的import关系图。

来源:https://www.cnblogs.com/aloneMing/p/17316100.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！