hi,欢迎访问本站!
当前位置: 首页Web前端正文

原生js脚本压缩css代码的方法

墨初 Web前端 74阅读

在web前端中,如果将css样式代码文件的体积进行压缩可以大大的加快网页的加载与渲染。下面博文中73so博客给大家说一说利用js脚本代码来压缩一段CSS样式代码的方法,也可以将其制作为工具方便使用。

原生js压缩CSS代码的方法

下面的代码可以将CSS代码进行压缩,并输出压缩后的CSS样式代码

// https://www.73so.com
var css = 'CSS代码'; //格压缩的CSS代码
css = css.replace(/\/\*(.|\n)*?\*\//g, ""); //删除注释
css = css.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
css = css.replace(/\,[\s\.\#\d]*\{/g, "{"); //容错处理
css = css.replace(/;\s*;/g, ";"); //清除连续分号
css = css.match(/^\s*(\S+(\s+\S+)*)\s*$/); //去掉首尾空白
ycss = css == null ? "" : css[1];
console.log(ycss); //压缩后的CSS代码

js压缩CSS代码的小工具

下面是一个利用js压缩CSS代码的一个小工具,可以复制代码保存为网页,运行即可!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS压缩工具-73so.com</title>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<textarea id="css" style="width:500px;height: 200px;"></textarea>
<button id="yasuo">点击压缩</button>
<script>
    $('#yasuo').on('click',function(){
        $('#css').val(compress_Css($('#css').val()));
    });
    function compress_Css(s) {
        //压缩代码
        s = s.replace(/\/\*(.|\n)*?\*\//g, ""); //删除注释
        s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
        s = s.replace(/\,[\s\.\#\d]*\{/g, "{"); //容错处理
        s = s.replace(/;\s*;/g, ";"); //清除连续分号
        s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/); //去掉首尾空白
        return s == null ? "" : s[1];
    }
</script>
</body>
</html>
声明:无特别说明,转载请标明本文来源!
发布评论
正文 取消