我们用站长工具的JavaScript-HTML格式化工具，我们打开页面，我今天要压缩的文件js文件：common.js ，把js代码复制到到JavaScript/HTML格式化工具里面如下图所示：
点击下面的“普通压缩”和“加密压缩”按钮，经过我的精心测试，使用“加密压缩”，对文件压缩率是最好的，所以点击“加密压缩”，压缩后如图：
javascript代码压缩后，我们就把这些代码在复制到common.js文件里面，在吧这个文件上传到空间原来的位置，进行访问是否存在一些错误，如果没有什么问题说明压缩成功；
我的common.js 文件压缩前和压缩后的对比：
压缩前：
压缩后：
文件压缩前和压缩后确实有明确的减少，说明压缩确实减少文件的大小，
我们来测试文件压缩前和压缩后所有能的时间做对比(我是用火狐插件测试传输速度)：
压缩前所用时间：
压缩后所用时间：
压缩前所用时间是：125ms，压缩后所用时间：78ms ，文件压缩后给我们节省大量的时间，如果每个js都进行压缩，我们房子访问速度会更快的。
(注：html文件和javascript压缩原来一样的，当时压缩html要用到“普通压缩”按钮压缩)
二、压缩css文件：
我们打开站长工具的Css压缩/格式化工具页面，我要压缩的文件是五色旗保健品商城的css主文件style.css，首先我们打开站长工具的Css压缩/格式化工具页面 ，把style.css 代码放到Css压缩/格式化工具里面，如下图所示：
点击“压缩代码”按钮后，css代码压缩成功，如下图所示：
后边就是压缩后的css代码，你要不右边的代码复制到源文件style.css里面在上传到服务器空间里面，在访问一下网，看看网页样式有没有改变，如果有点变化就需要简单的调试一下，如果没有变样，说明你的css压缩成功了；
下面我们来看看styl.css文件压缩前和压缩后的大小和放在访问速度的大小：
文件大小对比：
压缩前：
压缩后：
压缩前30kb，压缩后23kb，明显的文件大小减小了
压缩前所用时间：
css压缩前的时间.jpg (7.36 KB, 下载次数: 0)
下载附件
css压缩前的时间.jpg
2013-11-2 00:35 上传
压缩后所用时间：
压缩前所用时间是：188ms，压缩后所用时间：93ms ，css压缩后明显的节省了95ms；
总结：一个大的网站可能会有很多的javascript和css，如果没有都进行压缩的话，一定会减少很多文件大小的，其实减少文件大少并不是很重要，最重要的是，文件容量减少了，能够快速的提高网站访问的速度，给用户带来好的体验，我们尽量的把文件压缩到最小，这样才有利于用户快速的打开网站，至此我的五色旗保健品商城优化后，我的每天的访问量也增加了很多。
stylus跟sass和less一样都是css预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，官网的介绍为：富于表现力、动态的、健壮的 CSS因为stylus出现的比较晚，因此它的语法比较新。
Stylus默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。
stylus支持三种注释：
单行注释在编译之后会被删除，多行注释会被保留，多行缓冲注释相当于告诉Stylus压缩的时候这段无视直接输出。
编译之后的css
在stylus中，认为对于元素样式的设置 , {} : 是无意义的，因此在stylus中可以不用书写它们。同样因为没有来这些符号，所有空白符，换行，空格以及tab都很重要，写的时候要慎重。
stylus是用js写的，因此很多语法跟js很像，比如js定义变量：
stylus中定义变量：
Stylus有另外一个很酷的独特功能，不需要分配值给变量就可以定义引用属性。如下：
这样就可以简单的通过前置@字符在属性名前来访问该属性名对应的值。
另外使用案例是基于其他属性有条件地定义属性。在下面这个例子中，我们默认指定z-index值为1，但是，只有在z-index之前未指定的时候才这样：
属性会“向上冒泡”查找堆栈直到被发现，或者返回null（如果属性搞不定）。下面这个例子，@color最后是blue.
Stylus支持通过使用{}字符包围表达式来插入值，其会变成标识符的一部分。例如，-webkit-{'border' + '-radius'}等同于-webkit-border-radius 比如：
编译之后
编译过后：
stylus中支持混合，语法跟js中定义函数很像，它的作用是用来复制样式或者兼容浏览器
js中定义函数：
在stylus中定义混合语法：
1.混合名称() ,参数集合中可以传递参数，多个参数使用逗号隔开
2.混合名称 参数 ，多个参数使用逗号隔开
3.混合名称 参数 ，多个参数使用空格隔开
1.属性混合
封装一个属性，用来兼容各个浏览器
特点：通常以属性名称定义混合，来覆盖原有的属性，兼容浏览器
2.样式混合
封装的是多个属性，用来复用样式
编译之后
注意：
1.混合的参数集合绝对不能省略
2.混合名称与参数集合之间绝对不能有空格
3.如果参数中出现了空格，我们要使用第二种方式
Stylus强大之处就在于其内置的语言函数定义。其定义与混入(mixins)一致；却可以返回值。
很简单的例子，两数值相加的方法：
编译之后
sylus还可以引入外部的stylus文件
stylus会根据@keyframes自动创建兼容浏览器的样式，但是内容样式如果出现了css3则不会处理，需要使用混合书写的方式进行处理
举个栗子：
编译之后：
编译之后：
编译之后：
不管什么原因，如果遇到Stylus搞不定的特殊需求，你可以使用@css使其作为CSS字面量解决
编译为：
Stylus可以字符转码。这可以让字符变成标识符，或是渲染成字面量。注意Stylus中/当作为属性使用的时候需要用括号括起来：
编译为：
需要在vue.config.js中配置
然后在main.js中引入公共样式文件，这样就不需要在组件里面再引入一次公共样式啦
官网： http://stylus-lang.com/
参考中文文档： https://www.zhangxinxu.com/jq/stylus/
