---
name: jjb-code-optimization
description: 定义 JJB 项目代码优化工具使用规范。在使用 jjb-cmd opti、@cqjjb/react-code-optimization、代码格式化或导入排序时使用。支持导入排序、JSX 属性排序、批量处理。
---

# 应用配置与开发环境

## React 代码优化工具

- **工具说明**：

  - **工具名称**：`@cqjjb/react-code-optimization`

  - **技术实现**：本工具基于 Babel + Prettier 实现，用于对前端 React 项目中的代码进行自动化优化和格式化

  - **内置工具**：`@cqsjjb/scripts` 已内置代码优化工具（`code-optimization.js`），该工具基于 `@cqjjb/react-code-optimization` 实现，无需额外安装

- **主要能力**：

  - **导入语句排序**：

    - 按模块来源（`node_modules` / `~` / 相对路径等）进行分组

    - 按导入类型（默认导入 / 命名导入 / sideEffect 等）进行排序

    - 保证代码结构清晰，提升可读性

  - **JSX 属性排序**：

    - 对组件的属性进行规范化排序

    - 按照布尔属性、普通属性、事件属性等类型进行分组

    - 保持代码一致性，提升可维护性

  - **批量处理**：

    - 支持递归扫描目录

    - 对所有 `.js`、`.jsx`、`.mjs`、`.ejs`、`.less`、`.css` 文件进行优化

    - 自动处理整个项目的代码文件

- **使用方式**：

  - **方式一：使用命令行工具**

    ```bash
    # 进入目标目录，执行命令
    jjb-cmd opti
    ```

    - **前置条件**：请确保已全局安装 `jjb-cmd`（参考 [`20-jjb-cmd`](../../20-jjb-cmd/01-全局安装.md)）

    - **实现原理**：`jjb-cmd opti` 命令**直接调用** `@cqjjb/react-code-optimization` 包进行代码优化，不经过 `@cqsjjb/scripts` 的 `code-optimization.js` 脚本

    - **使用场景**：适用于快速优化当前目录下的代码

    - **详细说明**：关于 `jjb-cmd opti` 命令的详细使用方法和支持的文件类型，请参考 [`20-jjb-cmd`](../../20-jjb-cmd/02-命令列表.md)

  - **方式二：运行 package.json 中的脚本**（推荐）

    - **配置步骤**：在项目根目录的 `package.json` 文件的 `scripts` 中配置代码优化命令

    - **配置示例**：

      ```json
      // package.json
      {
        "scripts": {
          "code-optimization": "node node_modules/@cqsjjb/scripts/code-optimization.js"
        }
      }
      ```

    - **执行命令**：

      ```bash
      # 执行代码优化
      npm run code-optimization
      # 或
      yarn code-optimization
      ```

    - **实现原理**：`npm run code-optimization` 通过调用 `@cqsjjb/scripts/code-optimization.js` 脚本，该脚本内部使用 `@cqjjb/react-code-optimization` 进行代码优化

    - **注意事项**：

      1. 请确保已安装最新的 `@cqsjjb/scripts` 依赖包

      2. 执行命令将会优化应用所有代码

    - **与方式一的区别**：
      - `jjb-cmd opti`：直接调用 `@cqjjb/react-code-optimization`（全局命令）
      - `npm run code-optimization`：通过 `@cqsjjb/scripts/code-optimization.js` 调用（项目本地脚本）
      - 两者底层都使用 `@cqjjb/react-code-optimization`，但调用路径不同

  - **方式三：使用 VSCode 插件**

    - **插件名称**：`cqjjb-react-code-optimization`

    - **工具基础**：该插件基于 `@cqjjb/react-code-optimization` 实现

    - **插件下载**：https://test-dragon-yf-pub.oss-cn-hangzhou.aliyuncs.com/jjb/2025/9/10/3bb86ae95aa94079bdbb4b5c8a6910e2.rar

    - **使用方式**：

      1. 安装插件后，在代码文件上右键菜单

      2. 选择 `Code Optimization` 选项

      3. 插件会自动优化当前文件

    - **使用场景**：适用于单个文件的快速优化

  - **方式四：手动优化代码（API 调用）**

    - **适用场景**：在自定义的构建流程、脚本或工具链中灵活使用

    - **使用示例**：

      ```javascript
      const { optimization, formation } = require('@cqjjb/react-code-optimization');

      const rawCode = `
        import React from 'react';
        import { Button } from 'antd';
        const App = (props) => <Button {...props} disabled type="primary" />;
      `;

      // 优化代码
      const optimizedCode = optimization(rawCode);

      // 格式化代码
      formation(optimizedCode, formattedCode => {
        console.log('最终优化结果：\n', formattedCode);
      });
      ```

    - **API 说明**：

      | 函数 | 说明 |
      | :--- | :--- |
      | `optimization(code)` | 优化代码，返回优化后的代码字符串 |
      | `formation(code, callback)` | 格式化代码，通过回调函数返回格式化后的代码 |

- **注意事项**：

  - **版本控制**：执行代码优化前，建议先提交代码到版本控制系统，以便回退

  - **代码检查**：优化工具会修改代码文件，建议在优化后检查代码变更，确保符合预期

  - **执行时间**：优化工具需要扫描整个 `src` 目录，大型项目可能需要较长时间

  - **文件类型**：工具会自动处理 `.js`、`.jsx`、`.mjs`、`.ejs`、`.less`、`.css` 文件，其他文件类型不会被处理

  - **备份建议**：对于重要项目，建议在执行批量优化前先备份代码