css和js的压缩，降低代码可读性

css的压缩

安装

安装

npm install clean-css-cli -g

常用命令

查看版本

cleancss -v

查看帮助

cleancss -h

基本使用

cleancss -o popup-min.css popup.css

将popup.css处理压缩成popup-min.css

处理前：

处理后：会移出注释和空格，代码变成一整行

格式化

cleancss -f beautify popup-min.css

将popup-min.css 格式化输出到控制台

cleancss -f beautify popup-min.css -o popup-beautify.css

将popup-min.css 格式化后输出到popup-beautify.css

兼容

-c '*'（默认）- Internet Explorer 10+ 兼容模式
-c ie9- IE浏览器9+兼容模式
-c ie8- IE浏览器8+兼容模式
-c ie7- IE浏览器7+兼容模式

批量处理

cleancss -o merged.css popup.css popup-min.css

将popup.css、popup-min.css 压缩合并到merged.css中，对于相同的代码会自动进行处理

其他
其他内容可以自行查看官方文档：https://www.npmjs.com/package/clean-css-cli

js压缩

var b = [8, 94, 15, 88, 55, 76, 21, 39];
b = (function(a) {
    return [1, 4, 6].map(function(c) {
        return c * a;
    });
})(1.8).concat(
    b.map(function(a) {
        return 2 * a;
    })
);

对于webpack、vite等工具最终打包后都会将js处理成闭包格式，一致不了解是如何实现的。查了很久，最终发现了谷歌开源的：closure-compiler

下面简单介绍一下基本使用，其他内容可以自行查看官方文档

安装

npm i -g google-closure-compiler

基本使用

普通压缩

google-closure-compiler --js handle.js --js_output_file handle-min.js

• --js 后面跟的是输入文件，输入文件可以有多个
• --js_output_file 后面是压缩合并后的输出文件

原文件：

let times = 0.1 * 8 + 1;
function getExtra(n) {
    return [1, 4, 6].map(function(i) {
      return i * n;
  });
}
var arr = [8, 94, 15, 88, 55, 76, 21, 39];
arr = getExtra(times).concat(arr.map(function(item) {
  return item * 2;
}));

function sortarr(arr) {
  for(i = 0; i < arr.length - 1; i++) {
    for(j = 0; j < arr.length - 1 - i; j++) {
      if(arr[j] > arr[j + 1]) {
        var temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}
console.log(sortarr(arr));

压缩后，压缩后会变成一行，为了方便，下面是格式化后的

let times = 1.8;
function getExtra(a) {
  return [1, 4, 6].map(function (b) {
    return b * a;
  });
}
var arr = [8, 94, 15, 88, 55, 76, 21, 39];
arr = getExtra(times).concat(
  arr.map(function (a) {
    return 2 * a;
  })
);
function sortarr(a) {
  for (i = 0; i < a.length - 1; i++)
    for (j = 0; j < a.length - 1 - i; j++)
      if (a[j] > a[j + 1]) {
        var b = a[j];
        a[j] = a[j + 1];
        a[j + 1] = b;
      }
  return a;
}
console.log(sortarr(arr));

变量名（注释也会被移出）被处理替换掉了，但是代码结构不会被改变，这样可以保证代码不会出问题

高级压缩

google-closure-compiler -O ADVANCED handle.js --js_output_file handle-min.js

因为高级压缩会改变代码的结构，因此高级压缩时会先进行语法校验，如果代码存在语法问题会在控制台进行输出，当语法问题被处理完后，会进行高级压缩

压缩后的代码会变成一行，下面是格式化后的

var a = [8, 94, 15, 88, 55, 76, 21, 39];
a = (function (d) {
  return [1, 4, 6].map(function (g) {
    return g * d;
  });
})(1.8).concat(
  a.map(function (d) {
    return 2 * d;
  })
);
for (var b = console, c = b.log, e = a, f = 0; f < e.length - 1; f++)
  for (var h = 0; h < e.length - 1 - f; h++)
    if (e[h] > e[h + 1]) {
      var k = e[h];
      e[h] = e[h + 1];
      e[h + 1] = k;
    }
c.call(b, e);

就问这样压缩后，一般人能看懂代码写的是什么吗，尤其是当代码数量比较多时。
但是有个比较严重的问题，只能识别js，如果你要是使用了jquery等框架，编辑器是无法进行编辑的。

将目录下的js文件合并

google-closure-compiler 'a/**.js' --js_output_file a.js

注：这是相对目录