快来看看这个提效脚本-一键自动优化项目中 Lodash 导入方式

在现代 JavaScript 项目中，Lodash 是一个非常流行的工具库，它提供了很多高效的工具函数，帮助开发者简化代码和提高开发效率。然而，由于 Lodash 函数库庞大，一次性导入整个库可能会导致较大的文件体积，影响前端应用的加载速度，正因为如此，lodash也提供了lodash-es的版本，旨在优化lodash工具函数的使用，真正做到按需导入lodash的工具函数，也为了优化性能，减少不必要的代码引入。本文将详细介绍如何通过编写脚本自动化地将项目中 Lodash 的导入方式优化为按需导入。

需求描述

在一个大型 JavaScript 或 TypeScript 项目中，开发者可能习惯性地导入整个 Lodash 库，例如：

import _ from 'lodash';

这种导入方式虽然简单，但却引入了 Lodash 库的整个内容，导致以下问题：

1. 文件体积大：项目中可能并不需要 Lodash 的所有功能，导入整个库会增加不必要的体积。
2. 加载性能差：整个 Lodash 库被打包后会增加网络传输的大小，进而影响页面加载速度。
3. 不利于treeShaking(树摇优化)：大多数构建工具（如 Webpack）无法有效地从 Lodash 中按需删除未使用的代码。

为了解决这些问题，我们可以通过自动化工具来扫描项目中的代码，查找所有 Lodash 的导入和使用方式，并将其替换为按需导入的方式。

实现思路

该脚本的目的是自动化处理项目中所有 Lodash 导入的转换工作。具体实现步骤如下：

1. 遍历目录，获取所有相关文件：

   • 首先，我们需要遍历指定目录下的所有 JavaScript (.js) 和 TypeScript (.ts) 等文件，以便查找其中的 Lodash 导入语句和方法调用。

2. 识别并替换 Lodash 的导入语句：

   • 查找文件中的 import _ from 'lodash'; 语句，并将其替换为 _lodash。
   • 然后，扫描文件中使用的所有 Lodash 方法，去重并构建按需导入语句，例如：import { map, filter } from 'lodash-es';。

3. 替换 Lodash 方法的调用：

   • 替换文件中所有 _.methodName() 的调用为直接使用方法名称 methodName()。

4. 忽略某些目录：

   • 可以配置忽略某些特定目录（如第三方库、已经优化过的代码等），避免重复操作。

代码实现

const fs = require("fs");
const path = require("path");

const lodashFunctionPattern = /_\.(\w+)/g;

function getFiles(
  dir,
  fileSuffixList = [".js", ".ts", ".jsx", ".tsx"],
  ignoreDirectories = []
) {
  const files = fs.readdirSync(dir);
  let allFiles = [];

  files.forEach((file) => {
    const fullPath = path.join(dir, file);
    const stat = fs.statSync(fullPath);

    if (stat.isDirectory()) {
      // 检查当前目录是否在忽略列表中
      const relativePath = path.relative(process.cwd(), fullPath);
      if (
        !ignoreDirectories.some((ignorePath) =>
          relativePath.startsWith(ignorePath)
        )
      ) {
        allFiles = allFiles.concat(getFiles(fullPath, fileSuffixList, ignoreDirectories));
      }
    } else {
      // 检查文件后缀是否在指定列表中
      const fileExt = path.extname(file);
      if (fileSuffixList.includes(fileExt)) {
        allFiles.push(fullPath);
      }
    }
  });

  return allFiles;
}

function replaceLodashImport(filePath) {
  let content = fs.readFileSync(filePath, "utf-8");
  // 检查文件中是否有 lodash 的导入
  if (content.includes("import _ from 'lodash';")) {
    // 替换导入语句
    content = content.replace("import _ from 'lodash';", "_lodash");

    // 查找所有 lodash 的方法，去重并生成按需导入的语法
    const lodashFunctions = [];
    content.replace(lodashFunctionPattern, (_match, funcName) => {
      if (!lodashFunctions.includes(funcName)) {
        lodashFunctions.push(funcName);
      }
    });
    if (lodashFunctions.length > 0) {
      content = content.replace(
        "_lodash",
        `import { ${lodashFunctions.join(", ")} } from 'lodash-es';`
      );
    }

    // 替换所有 lodash 的方法调用
    content = content.replace(lodashFunctionPattern, (_match, funcName) => {
      return `${funcName}`;
    });

    fs.writeFileSync(filePath, content, "utf-8");
    console.log(`Updated file: ${filePath}`);
  }
}

// 执行替换操作
function updateLodashUsage(directory,fileSuffixList,ignoreDirectories) {
  const files = getFiles(directory,fileSuffixList,ignoreDirectories);

  files.forEach((file) => {
    replaceLodashImport(file);
  });
}

const projectDir = path.resolve(__dirname, "xxx");
updateLodashUsage(projectDir);

整个脚本主要实现了3个函数，分别如下:

1. getFiles 函数：

   • 该函数递归地遍历指定目录，返回指定查找的所有文件的路径。
   • 支持指定查找对应后缀的文件，通过第二个参数，默认是.ts,.js,.ts,.jsx。
   • 支持忽略某些目录，通过传入 ignoreDirectories 参数来实现。

2. replaceLodashImport 函数：

   • 该函数读取文件内容，并替换 import _ from 'lodash'; 为 _lodash，然后提取文件中所有使用的 Lodash 方法。
   • 根据使用的 Lodash 方法生成按需导入语句，并替换文件中的方法调用。

3. updateLodashUsage 函数：

   • 调用 getFiles 获取所有相关文件，并调用 replaceLodashImport 来执行文件内容的替换操作，同样的，也支持三个参数，对应getFiles函数的三个参数。

使用方式

在当前项目根目录下新建一个js文件，例如叫updateLodash.js,然后在终端执行命令node updatelodash.js即可。也可以将该命令添加到package.json当中，然后执行对应命令。如:

// package.json中
{
    "script":{
        "updateLodash":"node ./updateLodash.js"
    }
}

然后在终端执行命令npm run updateLodash即可一键替换所有lodash代码。

解决了什么问题

以上脚本解决了如下问题：

1. 优化了代码体积：通过按需导入 Lodash 函数，只引入项目实际需要的函数，避免了导入整个库，从而减少了最终打包文件的体积。
2. 提升了加载性能：减少了不必要的代码和依赖，优化了前端应用的加载时间。
3. 增强了树摇优化：使用 lodash-es（ES模块版本），能够更好地与现代构建工具（如 Webpack、Rollup 等）配合，进行树摇优化，去除未使用的代码。
4. 自动化批量处理：通过脚本自动替换项目中所有 Lodash 导入方式，节省了开发人员手动修改代码的时间和精力。

总结

通过编写上述脚本，我们能够自动化地将项目中 Lodash 的导入方式优化为按需导入。这种做法不仅提升了代码的加载性能，还能够减少不必要的依赖，优化最终打包结果。通过自动化脚本，开发人员可以快速批量处理项目中的所有相关文件，避免手动修改带来的重复劳动和出错风险。

这种方式的好处是显而易见的，特别是在大型项目中，优化加载时间和提升应用性能是非常重要的。