14-尚硅谷-webpack从入门到精通-压缩css

学习如何压缩CS。好打开我们的这个。Code，那么压缩CS呢？我们将第十个呢复制一份啊，就叫压缩CS了。我们呢，就在之前的基础上呢，去写相应的内容。好，那么来看啊。那么这里要清楚就是我们的配置呢，不一定要写这么多啊，我们呢，可以我们主要是就是前面的配置呢，我不想再重复，重复的再写了啊，没啥意义，所以呢，我们就直接复制之前的代码啊，直接复制之前代码，那么当然呢，也可以重新写起啊，这都可以。好，那么压缩CS呢，我们要注意就是我们只要我们只要引入一个插件就可以了。那么从这里你可以看到啊，看到什么呢？就是啊。你看他有的工作啊，会使用loader做，有的工作呢，会使用插件做。总而言之，其实有个比较明显的规律，就是log的做事呢，一般比较少啊，一般比较少，大部分工作呢，都是靠插件去完成的，尤其是这些压缩啊，这些东西，那么大部分都是靠压缩压咱们的一些插件完成。

而兼容性处理这些东西呢，诶是靠load去做的啊，一般是兼容性处理呢，靠load做，而压缩这些东西呢，是靠插件完成。所以这里面我们压缩的话呢，得使用一个插件好，这个插件呢，名字啊稍微有点长啊。我们先下一下啊。来这个插件的名字有点长啊。好，我们在写一下，在这写一下啊。叫optimize。That's。啊，有这样的插件，专门用来压缩我们的C。好，我们来把这个插件呢下下了。把它下下来。下来之后呢，待会儿呢，我们就可去使用它去压缩了，好，我们来去把它引入。

好，这里呢，采用大同的命运法啊。OK，那么这插件用法呢，难不难呢？诶，其实呢，非常之简单啊，有多简单，我们来看啊。插件用法呢，都是一样的道理，都是new调用即可调用啊。那么这里只要调用它就能够去压缩。啊，内部的默认配置呢，已经足够将CS进行压缩了，所以我们呢，不需要再修改它的配置了啊，只需要调用这个new，这个optimize CS CS这个插件，那么S就能压缩。好，我们看效果就好了啊，直接看效果，我们直接在终端中打开。然后呢，输入ipad去运行看效果。好，OK，没有报错啊，打开这里找到CS，这时候你会发现，诶，CS呢，整体呢都被压成一行了啊，压成一行了。那么大家也清楚啊，我们可以对比一下这个压缩之前和未压缩之前它有什么区别啊。

我们来看压缩之后，它体积大小呢，大概为二百零一四百啊二百零四百，我们呢，把这插件再注释掉。待遇形式。好，它大小呢为这样的二百七十三百层啊，就是这里呢，压的还是比较少的啊，咱们因为这个样式呢是不多的，就这几行样式，它呢都压缩了这样的啊，都会有一些比较明显的变化。那么将来呢，如果你的样式呢，会越来越多，非常非常多，那么这压缩量文件体积呢，达到越来越小，越来越小，那么越小的话呢，我们也知道请求速度啊，就会更快。那么加载速度就快，那么看到的效果，用户看到效果呢就会更快一些，这样的用户体验就会更好。所以呢，我们啊，那么在代码上线之前呢，那么一定要对代码压缩，那么其中压缩CS呢，就是使用这个插件，那么就会压缩成功了。

那么这里就是我们的对CS文件的所有处理啊，前面呢，我们一共做了对CS的一些提取，CS单独文件用那个插件，加上插件上面的load。而通过POS呢，做了CS的兼容器处理啊，解决了各大浏览器的平台的问题。最后呢，压缩CS，让CS文件呢体积达到最小，从而呢能够让我们啊更快的速度得到它的一些内容。好，那么这以上呢，就是我们对CS文件的一些处理了。