# 压缩 JavaScript

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。
>
>
>
> 所需插件  :
>
>
>
> `JavaScript 和 TypeScript`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。
>
>
>
> `File Watchers`  -  在   设置 | 插件   页面上安装插件。 该插件仅在拥有 Ultimate 订阅的 IntelliJ IDEA 中可用。

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

通常情况下，压缩是在构建过程中完成的，使用像 [webpack](https://webpack.js.org/guides/production/#minification) 这样的构建工具。 如果您未使用构建工具，可以使用独立工具，例如 [terser](https://terser.org/)。

要自动压缩您的代码，您需要安装一个压缩工具并配置一个 [File Watcher](using-file-watchers.html#ws_creating_file_watchers)，该工具将跟踪您的文件更改并运行压缩工具。

默认情况下，只要 File 关注者作用域内的 JavaScript 文件被更改并保存，就会开始压缩。 可以指定其他 [调用该工具的事件](using-file-watchers.html#launchFileWatcher)。 从 [File Watchers](using-file-watchers.html) 了解详情。

生成的压缩代码存储在一个单独的文件中，文件名为源 JavaScript 文件的名称和扩展名  `min.js` 。 此生成文件的位置在   要刷新的输出路径   字段中定义，该字段属于 [新建关注者对话框](new-watcher-dialog.html)。 但是，在   项目树  中，包含压缩代码的文件显示在作为节点显示的源 JavaScript 文件下方。 要更改此默认显示方式，请 [配置文件嵌套](file-nesting-dialog.html)，位置在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_minification_apply_file_watcher.mp4)

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

> **Note:**
> 该示例仅说明了工作流程。 您可以安装其他压缩工具并按照建议的步骤进行配置。

## 示例：使用 terser 压缩 JavaScript

要自动压缩代码，您需要安装 terser 并配置一个 [UglifyJS 文件监视器](#ws_minifying_js_create_file_watcher)，该监视器将跟踪文件的更改并运行工具。

默认情况下，只要 File 关注者作用域内的 JavaScript 文件被更改并保存，就会开始压缩。 您可以指定其他 [触发 terser 的事件](using-file-watchers.html#launchFileWatcher)。 从 [File Watchers](using-file-watchers.html) 了解详情。

生成的压缩代码存储在一个单独的文件中，文件名为源 JavaScript 文件的名称和扩展名  `min.js` 。 此生成文件的位置在   要刷新的输出路径   字段中定义，该字段属于 [新建关注者对话框](new-watcher-dialog.html)。 但是，在   项目树  中，包含压缩代码的文件显示在作为节点显示的源 JavaScript 文件下方。 要更改此默认显示方式，请 [配置文件嵌套](file-nesting-dialog.html)，位置在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中。

Procedure: 开始之前

1. 请确保您的计算机上安装了 [Node.js](http://nodejs.org/)。

2. 请确保在设置中已启用  JavaScript and TypeScript  捆绑插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择  `插件` 。 在搜索字段中，键入  JavaScript 和 TypeScript 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。

3. 安装并启用  File Watchers  插件，在   设置 | 插件   页面上操作，如 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo)中所述。

Procedure: 安装 terser

* 在命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入：

`npm install --save-dev terser`

了解更多信息，请访问 [npmjs 官方网站](https://www.npmjs.com/package/terser)。

Procedure: 创建一个 File Watcher

1. 在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))）中，点击   File Watchers   下的   工具  。 [File Watchers 页面](settings-tools-file-watchers.html) 显示了已配置的 File Watchers 列表。

2. 点击 ![添加按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg) 或按 `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Ctrl+N` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (NetBeans), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS)) 并从列表中选择   UglifyJS   预定义模板。

![创建 UglifyJS (terser) 关注者：点击添加并选择模板](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_minification_create_uglifyjs_file_watcher_add_watcher.png)

新建关注者   对话框将打开。

![创建 UglifyJS（terser）监视器：具有默认设置的新监视器对话框](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_minification_create_uglifyjs_file_watcher_new_watcher_dialog.png)

3. 在   程序  字段中，指定 terser 可执行文件的位置。 手动输入路径，或点击 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.openDiskHover.svg) 并在打开的对话框中选择文件位置。

4. 默认情况下，   范围   字段显示   项目文件  。 为了避免已经压缩的文件再次压缩，请按照 [定义新范围](configuring-scopes-and-file-colors.html#creating-a-new-custom-scope)中所述配置带有  `file:*js&&!file:*.min.*`  模式的自定义范围。

![手动输入模式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_add_scope_type_pattern.png)

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

![选择自定义范围](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_minification_create_uglifyjs_file_watcher_new_watcher_dialog_select_custom_scope.png)

5. 如有必要，根据 [File Watchers](using-file-watchers.html)中所述接受其他默认的文件监视器设置或重新配置它们，然后点击   OK  。 IntelliJ IDEA 将您带回   File Watchers  页面，新的文件监视器已添加到列表中：

![创建 UglifyJS 监视器：新的监视器已添加到列表中](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_minification_create_uglifyjs_file_watcher_new_watcher_added.png)

6. 请确保选中   已启用   复选框。

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

Procedure: 运行 terser

IntelliJ IDEA 会在您更改 [选定范围](#ws_js_minify_example_terser_scope)中的 JavaScript 文件时自动运行  terser 。

## See also

### 过程

[File Watchers](using-file-watchers.html)

### 外部链接

[https://developers.google.com/closure/compiler/](https://developers.google.com/closure/compiler/) [https://terser.org/](https://terser.org/)

### 语言和框架特定指南

[JavaScript](javascript-specific-guidelines.html)