
























有些时候,可能需要压缩网页或JavaScript代码的体积(减少网页和JavaScript代码体积,或许还可以提升一点点性能),这些时候,可以试试本文中的工具
如果是Hexo博客,可以使用hexo-minify这一个插件,这个插件使用html-minifier、terser和clean-css作为HTML、JavaScript和CSS的压缩库,一般情况下Hexo这个插件体验是最好的(使用插件以后,Hexo生成111个文件需要花费13秒,可以作为参考)。
安装:
1 | npm install hexo-minify --save |
一般情况下不需要额外设置即可使用,也可以手动配置一些参数,具体可以见GitHub仓库
如果是HTML,可以使用html-minifier,这个工具使用uglify-js和clean-css作为JavaScript和CSS的压缩库(压缩HTML内嵌的JavaScript和CSS),能很好地压缩HTML文件。如果需要更好的ES6支持,可以使用html-minifier-terser,这个工具使用terser(uglify-js的fork,对ES6有更好的支持)作为JavaScript压缩库,不过看起来这个工具很久没更新了,因此还是需要考虑是否需要ES6来做出选择。
安装:
1 | npm install html-minifier -g |
使用(输入input.html,去除多余字符以及注释,并压缩JavaScript以及CSS,输出output.html。所有参数具体可以见GitHub仓库):
1 | html-minifier --collapse-whitespace --remove-comments --minify-js --minify-css input.html -o output.html |
如果是JavaScript,推荐使用terser,这是uglify-js的fork版本,对ES6有良好的支持,并且一直在持续维护,因此推荐使用。
安装:
1 | npm install terser -g |
使用(压缩input.js的JavaScript代码并输出output.min.js):
1 | terser input.js -o output.min.js |
如果是CSS,推荐使用clean-css。如果安装了html-minifier,其实也可以使用html-minifier来压缩CSS,本身也是使用clean-css来压缩CSS,不过还是更推荐直接使用clean-css来压缩
安装:
1 | npm install clean-css -g |
使用(压缩input.css的CSS并输出output.min.css):
1 | cleancss input.css -o output.min.css |
如果想要批量压缩JavaScript代码文件,可以使用以下命令(使用terser,因此需要安装terser。建议在Linux环境下执行,也可以使用Git Bash),命令会使用find寻找.js文件,并使用terser进行压缩:
1 | find 想要压缩的文件夹(如果是当前文件夹则为.) -name "*.js" -exec terser {} -o {} -c -m \; |
HTML可以使用(使用html-minifier,因此需要安装html-minifier),命令会使用find寻找.html文件,并使用terser压缩(参数是–collapse-whitespace –remove-comments –minify-js –minify-css):
1 | find public/ -name "*.html" -exec html-minifier --collapse-whitespace --remove-comments --minify-js --minify-css -o {} {} \; |
命令可以放在Vercel或Cloudflare Pages的构建命令中,每次构建即可自动完成压缩
命令是单线程的,因此在完成一个代码文件的压缩以后才会压缩下一个,效率可能会差很多,因此更推荐使用构建工具进行构建
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。