WebStorm 2025.2 Help

压缩 JavaScript

压缩缩小是指在不改变源代码功能的前提下,删除所有不必要的字符,例如空格、换行符、注释等。 在开发和调试阶段,这些字符有助于提升代码的可读性。 在生产阶段,它们只会增加需要传输的代码体积。

压缩通常作为构建流程中的一个步骤执行,使用如 webpack 等构建工具。 如果您不使用构建工具,可以使用独立工具,例如 terser

要自动压缩代码,您需要安装一个压缩工具并配置一个 File Watcher ,用于监视文件变更并运行压缩工具。

默认情况下,只要 File Watcher 作用域内的 JavaScript 文件发生更改并保存,压缩便会开始。 您可以指定其他 调用工具的事件。 详细信息请参阅 File Watchers

生成的压缩代码将存储在一个与源 JavaScript 文件同名但扩展名为 min.js 的单独文件中。 生成文件的位置在 要刷新的输出路径 字段中指定,该字段位于 新建监视器对话框中。 但在 项目树 中,压缩代码文件会显示在作为节点展示的源 JavaScript 文件下方。 要更改此默认显示方式,请在 项目 工具窗口中 配置文件嵌套 Alt+1

以下示例展示了如何直接在 WebStorm 中使用 terser 压缩 JavaScript 代码。

示例:使用 terser 压缩 JavaScript

若要自动压缩代码,需安装 terser 并配置 UglifyJS File Watcher ,用于监控文件变更并运行此工具。

默认情况下,只要 File Watcher 作用域内的 JavaScript 文件发生更改并保存,即开始执行压缩。 您可以指定其他 调用 terser 的事件。 详细信息请参阅 File Watchers

生成的压缩代码将存储在一个与源 JavaScript 文件同名但扩展名为 min.js 的单独文件中。 生成文件的位置在 要刷新的输出路径 字段中指定,该字段位于 新建监视器对话框中。 但在 项目树 中,压缩代码文件会显示在作为节点展示的源 JavaScript 文件下方。 要更改此默认显示方式,请在 项目 工具窗口中 配置文件嵌套 Alt+1

开始之前

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

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

安装 terser

  • 在嵌入式 终端Alt+F12 )中键入:

    npm install --save-dev terser

    通过 npmjs 官方网站了解更多信息。

创建 File Watcher

  1. 设置 对话框(Ctrl+Alt+S )中,单击 文件监视器 下的 工具。 打开的 File Watchers 页面将显示已配置的 File Watcher 列表。

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

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

    将打开 新建监视器 对话框。

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

  4. 默认情况下, 作用域 字段显示 项目文件。 为避免重复压缩已压缩文件,请按照 定义新作用域中所述,使用 file:*js&&!file:*.min.* 模式配置自定义作用域。

    手动输入匹配模式

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

    选择自定义作用域
  5. 接受其他默认 File Watcher 设置,或根据需要进行重新配置,如 文件监视器 中所述,然后单击 确定。 WebStorm 将返回 文件监视器 页面,新建的 File Watcher 将添加到列表中:

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

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

运行 terser

当您更改 选定作用域中的 JavaScript 文件时,WebStorm 会自动运行 terser

您可以配置 terser在其他事件中运行,具体说明请参阅 配置高级选项

    最后修改日期: 2025年 9月 26日