压缩 JavaScript
缩小化或 压缩是指移除所有不必要的字符,如空格、新行、注释,而不改变源代码的功能。 在开发和调试过程中,这些字符使代码更易读。 在生产阶段,它们只会增加需要传输的代码量。
通常情况下,压缩是在构建过程中完成的,使用像 webpack 这样的构建工具。 如果您未使用构建工具,可以使用独立工具,例如 terser。
要自动压缩您的代码,您需要安装一个压缩工具并配置一个 File Watcher ,该工具将跟踪您的文件更改并运行压缩工具。
默认情况下,文件监视器范围内的 JavaScript 文件一旦被更改并保存,就会立即开始压缩。 您可以指定其他 触发工具的事件。 请了解更多有关 File Watchers的信息。
生成的压缩代码存储在一个单独的文件中,文件名为源 JavaScript 文件的名称和扩展名 min.js 。 此生成文件的位置在 要刷新的输出路径 字段中定义,位于 新观察器对话框内。 但是,在 项目树 中,包含压缩代码的文件显示在作为节点显示的源 JavaScript 文件下方。 要更改此默认显示方式,请在 项目 工具窗口 Alt+1 中 配置文件嵌套。
以下示例展示了如何直接从 PyCharm 使用 terser 压缩 JavaScript 代码。
示例:使用 terser 压缩 JavaScript
要自动压缩代码,您需要安装 terser 并配置一个 UglifyJS File Watcher ,它将跟踪文件的更改并运行该工具。
默认情况下,文件监视器范围内的 JavaScript 文件一旦被更改并保存,就会立即开始压缩。 您可以指定其他 触发 terser 的事件。 请了解更多有关 File Watchers的信息。
生成的压缩代码存储在一个单独的文件中,文件名为源 JavaScript 文件的名称和扩展名 min.js 。 此生成文件的位置在 要刷新的输出路径 字段中定义,位于 新观察器对话框内。 但是,在 项目树 中,包含压缩代码的文件显示在作为节点显示的源 JavaScript 文件下方。 要更改此默认显示方式,请在 项目 工具窗口 Alt+1 中 配置文件嵌套。
开始之前
安装 terser
在嵌入的 终端 (Alt+F12 )中,输入:
npm install --save-dev terser了解更多信息,请访问 npmjs 官方网站。
创建文件监视器
在 设置 对话框(Ctrl+Alt+S )中,点击 文件监视器 下的 工具。 File Watchers 页面 显示了已配置的 File Watchers 列表。
点击
或按 Alt+Insert 并从列表中选择 UglifyJS 预定义模板。

新监视器 对话框将打开。

在 程序 字段中,指定 terser 可执行文件的位置。 手动输入路径或点击
并在打开的对话框中选择文件位置。
默认情况下, 范围 字段显示 项目文件。 为了避免已经压缩的文件再次压缩,请按照 定义新范围中所述配置带有
file:*js&&!file:*.min.*模式的自定义范围。
然后从 作用域 列表中选择新的作用域。

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

请确保选中 已启用 复选框。
默认情况下,File Watcher 将在当前项目中可用。 要在其他项目中使用它,请从 全局 列表中选择 级别。
运行 terser
PyCharm 会在您更改 选定范围中的 JavaScript 文件时自动运行 terser。
您可以按照 配置高级选项中所述,配置 terser在其他事件上运行。