JetBrains Rider 2025.1 Help

压缩 JavaScript

缩小化或 压缩是指移除所有不必要的字符,如空格、新行、注释,而不改变源代码的功能。 在开发和调试过程中,这些字符使代码更易读。 在生产阶段,它们只会增加需要传输的代码量。

通常情况下,压缩是在构建过程中完成的,使用像 webpack 这样的构建工具。 如果您未使用构建工具,可以使用独立工具,例如 terser。

要自动压缩您的代码,您需要安装一个压缩工具并配置一个 File Watcher ,该工具将跟踪您的文件更改并运行压缩工具。

默认情况下,文件监视器范围内的 JavaScript 文件一旦被更改并保存,就会立即开始压缩。 您可以指定其他 触发工具的事件。 请了解更多有关 File Watchers的信息。

生成的压缩代码存储在一个单独的文件中,文件名为源 JavaScript 文件的名称和扩展名 min.js 。 此生成文件的位置在 要刷新的输出路径 字段中定义,位于 新观察器对话框内。 但是,在 项目树 中,包含压缩代码的文件显示在作为节点显示的源 JavaScript 文件下方。 要更改此默认显示方式,请在 资源管理器 工具窗口 Alt+1 中 配置文件嵌套。

以下示例展示了如何直接从 JetBrains Rider 使用 terser 压缩 JavaScript 代码。

示例:使用 terser 压缩 JavaScript

要自动压缩代码,您需要安装 terser 并配置一个 UglifyJS File Watcher ,它将跟踪文件的更改并运行该工具。

默认情况下,文件监视器范围内的 JavaScript 文件一旦被更改并保存,就会立即开始压缩。 您可以指定其他 触发 terser 的事件。 请了解更多有关 File Watchers的信息。

生成的压缩代码存储在一个单独的文件中,文件名为源 JavaScript 文件的名称和扩展名 min.js 。 此生成文件的位置在 要刷新的输出路径 字段中定义,位于 新观察器对话框内。 但是,在 项目树 中,包含压缩代码的文件显示在作为节点显示的源 JavaScript 文件下方。 要更改此默认显示方式,请在 资源管理器 工具窗口 Alt+1 中 配置文件嵌套。

在开始之前

  1. 请确保您的计算机上安装了 Node.js。

  2. 请确保在设置中启用 JavaScript and TypeScript捆绑插件。 按下 Ctrl+Alt+S 打开设置,然后选择 插件。 点击 已安装 选项卡。 在搜索字段中,键入 JavaScript and TypeScript。 有关插件的更多信息,请参阅 插件管理。

  3. 确保在设置中启用了 File Watchers捆绑插件。 按下 Ctrl+Alt+S 打开设置,然后选择 插件。 点击 已安装 选项卡。 在搜索字段中,输入 File Watchers。 有关插件的更多信息,请参阅 插件管理。

安装 terser

  • 在嵌入的 终端 (Alt+F12 )中,输入:

    npm install --save-dev terser

    了解更多信息,请访问 npmjs 官方网站。

创建文件监视器

  1. 在 设置/首选项 对话框(Ctrl+Alt+S )中,点击 文件监视器 下的 工具。 File Watchers 页面 显示了已配置的 File Watchers 列表。

  2. 点击 添加按钮 或按 Alt+Insert 并从列表中选择 UglifyJS 预定义模板。

    创建 UglifyJS(terser)监视器:点击添加并选择模板

    新监视器 对话框将打开。

    创建 UglifyJS(terser)监视器:具有默认设置的新监视器对话框
  3. 在 程序 字段中,指定 terser 可执行文件的位置。 手动输入路径或点击 并在打开的对话框中选择文件位置。

  4. 默认情况下, 作用域 字段显示 项目文件。 为了避免已经压缩的文件再次压缩,请按照 定义新范围中所述配置带有 文件:*js&&!文件:*.min.* 模式的自定义范围。

    手动输入模式

    然后从 作用域 列表中选择新的作用域。

    选择自定义范围
  5. 如有必要,根据 文件监视器 中所述接受其他默认的文件监视器设置或重新配置它们,然后点击 确定。 JetBrains Rider 将您带回 文件监视器 页面,新的文件监视器已添加到列表中:

    创建 UglifyJS 监视器:新的监视器已添加到列表中
  6. 请确保选中 已启用 复选框。

    默认情况下,File Watcher 将在当前项目中可用。 要在其他项目中使用它,请从 全局 列表中选择 级别。

运行 terser

JetBrains Rider 会在您更改 选定范围中的 JavaScript 文件时自动运行 terser。

您可以按照 配置高级选项中所述,配置 terser在其他事件上运行。

    2025年 7月 31日