npm 包 @rochars/rollup-plugin-closure-compiler 使用教程

阅读时长 3 分钟读完

在前端开发中,我们常常需要对 JavaScript 代码进行压缩和优化,以提升网页性能和加载速度。而 Google 的 Closure Compiler 是一款功能强大的 JavaScript 优化工具,可以将代码压缩、混淆、优化,达到最小化代码和提高性能的目的。为了方便使用 Closure Compiler,开发者 rochars 开发了一个 rollup 插件 @rochars/rollup-plugin-closure-compiler,下面我们来一起学习一下如何使用这个插件。

首先安装

npm @rochars/rollup-plugin-closure-compiler

可以使用 npm 或 yarn 安装该插件,例如:

配置 rollup.config.js

在 rollup 配置文件中添加插件相关配置,示例如下:

-- -------------------- ---- -------
------ ------- ---- ------------------------------------------

------ ------- -
  ------ -----------
  ------- -
    ----- ----------------
    ------- -----
  --
  -------- -
    ---------
      -- ----
      ---- ---------
      ----------- --------------
      ------------ --------------
      ----------------- ---------
      ------------- --------
      ----------------- -----
    --
  -
-
  • env: Closure Compiler 的编译环境,默认是 BROWSER,可以选 CUSTOM、NODE、SIMPLE。
  • languageIn:Input 代码的 ECMAScript 版本,默认是 ECMASCRIPT5。
  • languageOut:Output 代码的 ECMAScript 版本,默认是 ECMASCRIPT5。
  • compilationLevel:编译级别,有 WHITESPACE_ONLY、SIMPLE、ADVANCED,一般使用 SIMPLE。
  • warningLevel:警告级别,可选 VERBOSE、DEFAULT、QUIET,默认是 DEFAULT。
  • rewritePolyfills:是否重写 polyfills,默认为 true。

注意:warningLevelrewritePolyfills 都是可选配置,如果不传参数则默认值是『DEFAULT』和『true』。

示例代码

以上代码为我们定义一个函数,在 index.js 中调用,并打印参数结果。下面我们来看一下如何通过 @rochars/rollup-plugin-closure-compiler 插件进行优化压缩。

执行:

将会生成 bundle.min.js 文件,其中就包含了经过 Closure Compiler 优化压缩后的代码。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60065f72238a385564ab67ce

纠错
反馈