UglifyJsPlugin 插件学习

[Christian-Yang]

UglifyjsWebpackPlugin

【找不到UglifyjsPlugin这个插件，但是能找到UglifyjsWebpackPlugin插件】

使用 npm: npm install uglifyjs-webpack-plugin --save-dev

十分重要!

这个插件这个插件依赖 uglify-js，所以为了使用这个插件，也要安装 uglify-js；

然而，目前 (2017/1/25) 可用的 uglify-js npm 包，不支持压缩 ES6 代码。为了支持 ES6，必须提供一个具有压缩 ES6 能力的版本，又称之为 harmony 版本。 如果你的压缩目标是 ES6: yarn add git://github.com/mishoo/UglifyJS2#harmony --dev 如果你的压缩目标是 ES5: yarn add uglify-js --dev 用法

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: {...},
  output: {...},
  module: {...},
  plugins: [
    new UglifyJSPlugin()
  ]
};

选项 这个插件支持 UglifyJS 的功能，如下所述:

Mangling mangle 乱砍 撕碎

mangle.props (boolean|object) - 传递 true 或者一个对象可以启用并提供 UglifyJS mangling 属性选项 - 参考有关 mangleProperties 选项的 UglifyJS 文档。

注意：UglifyJS 警告，如果你使用 mangling 属性，你可能会破坏你的 source，所以如果你不确定你为什么需要这个特性，你最好不要使用它！你可以按如下方式调整行为：

new UglifyJsPlugin({
  mangle: {
    // 跳过这些
    except: ['$super', '$', 'exports', 'require']
  }
})

提取注释 extractComments 选项可以是：

•   true: 所有在comments选项中保存的注释都会被移到单独的文件。
        如果源文件是 foo.js ,那注释将被存储为 foo.js.LICENSE 。
•   通常表达式（ 如：RegExp或者string ）或者 function (astNode, comment) -> boolean： 
         所有匹配所给定的表达式（ 等于返回true的函数 ）会被提取为分离文件。
         comments选项指定注释是否被储存， i.e。
         可以在存储一些注释当在提取其他注释即使是存储已经被被提取。
•   object存在下面的值，所有的选项：
•   condition: 通常表达式或者相应函数（见上文）
•   filename: 提取注释的文件会被存储。字符或者是返回字符的函数function (string) -> string，
        作为原文件名。默认加上文件后缀名.LICENSE。
•   banner: Banner 文本会在原文件的头部指出被提取的文件。会在源文件加入该信息。
        可以是false(表示没有banner)，string，或者function (string) -> string
        会在提取已经被存储注释的时候被调用。注释会被覆盖。 默认:
        /*! For license information please see foo.js.LICENSE */

[Christian-Yang]

webpack starter webpack.prod.js中的源代码：

/**
       * Plugin: UglifyJsPlugin
       * Description: Minimize all JavaScript output of chunks.
       * Loaders are switched into minimizing mode.
       *
       * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
       *
       * NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
       */
      new UglifyJsPlugin({
        // beautify: true, //debug
        // mangle: false, //debug
        // dead_code: false, //debug
        // unused: false, //debug
        // deadCode: false, //debug
        // compress: {
        //   screw_ie8: true,
        //   keep_fnames: true,
        //   drop_debugger: false,
        //   dead_code: false,
        //   unused: false
        // }, // debug
        // comments: true, //debug

        beautify: false, //prod  美化输出。
        output: {
           // output对象：   一个提供 UglifyJS   OutputStream 选项的对象
          comments: false
         // comments  :
            // 默认保留注释（包括 /*!, /**!, @preserve or @license） 注释相关的配置  
            //压缩和丑化的代码中是否保留注释
        }, //prod
        mangle: {//
          screw_ie8: true
          // –screw-ie8, 用于生成完全兼容IE6-8的代码
        }, //prod
        compress: {   //一些压缩设置
          screw_ie8: true,
          warnings: false,
          conditionals: true,
          unused: true,
          comparisons: true,
          sequences: true,
          dead_code: true,
          evaluate: true,
          if_return: true,
          join_vars: true,
          negate_iife: false // we need this for lazy v8
        },
      }),

压缩设置可以在这里查到：http://lisperator.net/uglifyjs/compress

[Christian-Yang]

mangle

这个东西是什么意思？ 这里有解释： 转自：http://www.cnblogs.com/flyrui316/p/5002320.html

js压缩、混淆和加密 最近看到有些论坛在讨论js压缩、混淆和加密的问题，特意找了些资料看了下，现在总结一下：

1.关于三者的定义与区别

压缩：删除 Javascript 代码中所有注释、跳格符号、换行符号及无用的空格，从而压缩 JS 文件大小，优化页面加载速度。

混淆：经过编码将变量和函数原命名改为毫无意义的命名（如function(a,b,c,e,g)等），以防止他人窥视和窃取 Javascript 源代码，也有一定压缩效果。

加密：一般用eval方法加密，效果与混淆相似，也做到了压缩的效果。

　　从定义中可以看出，压缩的主要目的是消除注释等无用字符，达到精简js代码，减小js文件大小的目的，这也是页面优化的一种方式；而混淆和加密的目的比较接近，都是为了防止他人直接查看源码，对代码（如重要的api等）起保护作用，但这也只是增加了阅读代码的代价，也就是所谓的防君子不防小人。但是当混淆和加密联合使用时，如先混淆在加密（或者先加密再混淆）时，破解时间就会增加。关于js的加密，可以参考这篇文章：http://www.cnblogs.com/top5/archive/2009/08/07/1540860.html

[Christian-Yang]

UglifyJS中文文档

这里有UglifyJS中文文档，其中有关于混淆的详细解释。

http://www.ctolib.com/topics-113469.html

[Christian-Yang]

  mangle: {//
          screw_ie8: true
          // –screw-ie8, 用于生成完全兼容IE6-8的代码
        }, //prod

这个页面上有这个设置：http://www.th7.cn/web/ajax/201612/206984.shtml