统计组件使用次数：50 行代码解决大难题

前端

2023-12-23 12:13:16

前言

随着前端项目规模的不断扩大，组件库的使用越来越广泛。组件库可以帮助我们提高开发效率，降低开发成本，并保证代码质量。但是，在组件库中，组件的使用情况往往是分散的，难以统计。这给组件库的维护和优化带来了很大的挑战。

为了解决这个问题，我们可以通过 webpack 来统计组件的使用次数。webpack 是一个用于构建前端应用程序的打包工具。它可以将各种资源（如 JavaScript、CSS 和图片）打包成一个或多个文件，以便在浏览器中加载。

实现

统计组件使用次数的具体步骤如下：

在 webpack 配置文件中，启用「记录模块使用情况」功能。这可以通过在 webpack 配置文件的「output」字段中设置「recordsPath」属性来实现。
在 webpack 配置文件中，配置「optimization」字段。这可以用来对打包后的文件进行优化，并生成一个包含模块使用信息的 JSON 文件。
使用「webpack-module-usage-stats」库来解析 JSON 文件，并提取出组件的使用次数信息。

下面是一个示例 webpack 配置文件：

const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    recordsPath: path.resolve(__dirname, 'records.json')
  },
  optimization: {
    usedExports: true
  }
};

运行 webpack 命令后，将在「dist」目录下生成一个名为「records.json」的文件。这个文件包含了所有模块的使用信息，包括组件的使用次数。

我们可以使用「webpack-module-usage-stats」库来解析这个 JSON 文件，并提取出组件的使用次数信息。

const ModuleUsageStats = require('webpack-module-usage-stats');

const stats = new ModuleUsageStats(path.resolve(__dirname, 'records.json'));

const componentUsage = stats.getUsedModules('component-library');

console.log(componentUsage);