npm 包 fis-optimizer-uglify-js-latest 使用教程

背景

在前端网站开发中，为了提高网站的加载速度以及网站的性能，需要对 Javascript 代码进行压缩以及混淆等优化，以缩小文件大小，提高文件执行速度和性能优化。

而目前在前端开发中，NPM 已经成为了前端工程化中必不可少的组件，其中就包括了众多优秀的前端资源和工具库，比如常用的前端构建工具 FIS3 。

FIS3 作为一个优秀的前端构建工具，提供了丰富的插件，其中 fis-optimizer-uglify-js-latest 插件就是提供了在编译过程中对 JS 代码进行压缩的功能。下面我们来看下 fis-optimizer-uglify-js-latest 插件的使用教程。

安装

使用 fis-optimizer-uglify-js-latest 插件需要确保已经安装了 FIS3 工具，接下来使用 NPM 安装 fis-optimizer-uglify-js-latest 插件，可以通过以下命令进行安装：

npm install fis-optimizer-uglify-js-latest --save-dev

安装成功后，可以在 FIS3 的配置文件配置使用此插件：

// fis-conf.js
fis.match('*.js', {
    optimizer: fis.plugin('uglify-js-latest')
});

配置

fis-optimizer-uglify-js-latest 插件有很多的配置项，这里我们只列出其中常用的几个：

例如开启混淆、关闭压缩、打印压缩日志：

// fis-conf.js
fis.match('*.js', {
    optimizer: fis.plugin('uglify-js-latest', {
        mangle: true, // 混淆名称
        compress: false, // 关闭压缩
        output: true // 打印压缩日志
    })
});

测试

我们来通过编写一个测试脚本，测试 fis-optimizer-uglify-js-latest 插件是否配置成功。例如在 src 目录下创建一个 index.js 文件，代码如下：

function add(a,b){return a+b}console.log(add(1,2));

执行 fis3 release prod 命令进行编译，可以看到经过 fis-optimizer-uglify-js-latest 插件压缩后，原有的 index.js 文件变成了以下文件：

function add(n,d){return n+d}console.log(add(1,2));

总结

至此，我们已经了解了 fis-optimizer-uglify-js-latest 插件的基本使用以及常用配置项，通过对 fis-optimizer-uglify-js-latest 插件的使用学习，我们可以让我们的前端网站在性能上有更好的提升。希望此篇文章可以为大家带来一些帮助，谢谢！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61441