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
注：这是相对目录