npm 包 uglifyes-webpack-plugin 使用教程

阅读时长 3 分钟读完

前言

在前端开发中,压缩 JS 文件是必不可少的步骤,它可以减小文件大小,缩短加载时间,提高网页的性能。Webpack 是一款优秀的前端构建工具,可以帮助我们自动化地构建前端项目,在构建时使用 UglifyJs 压缩 JS 文件十分方便,然而 UglifyJs 的依赖版本升级较慢,导致一些 ES6 语法的压缩存在问题,因而就有了 Uglifyes-webpack-plugin。本文将介绍如何使用这个插件来压缩 JavaScript 代码。

安装

配置

在 webpack.config.js 中添加以下配置:

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

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

通过上述配置,即可将 JS 文件压缩为最精简的形式。下面对其中的参数进行一一介绍:

  • parallel:默认为 os.cpus().length - 1,即利用机器的多核 CPU 并行压缩(可以提高压缩速度)。
  • sourceMap:是否生成 sourcemap,用于调试压缩后的代码,便于中断点调试。
  • uglifyOptions:UglifyJs 配置项,包含 compressmangleoutput 三个子对象。

示例

下面来看一个简单的示例:

使用 Uglifyes-webpack-plugin 压缩后会变成:

效果如下:

总结

Uglifyes-webpack-plugin 是一款十分使用方便的插件。本文介绍了它的安装和配置方法,并且给出了一个示例。使用这款插件,可以让你的 JavaScript 代码变得更加精简,提高网页的性能。

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

纠错
反馈