这篇文章主要介绍了vue如何去除多余的样式,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
去除多余的样式
随着项目越来越大,书写的不注意,不自然的就会产生一些多余的css,小项目还好,一旦项目大了以后,多余的css会越来越多,导致包越来越大,从而影响项目运行性能,所以有必要在正式环境去除掉这些多余的css,这里推荐一个库purgecss,支持CLI、JavascriptApi、Webpack等多种方式使用,通过这个库,我们可以很容易的去除掉多余的css。
<h2>Hello Vanilla!</h2> <div> We use Parcel to bundle this sandbox, you can find more info about Parcel <a href="https://parceljs.org" rel="external nofollow" target="_blank" rel="noopener noreferrer">here</a>. </div> body { font-family: sans-serif; } a { color: red; } ul { li { list-style: none; } } import Purgecss from "purgecss"; const purgecss = new Purgecss({ content: ["**/*.html"], css: ["**/*.css"] }); const purgecssResult = purgecss.purge();
最终产生的purgecssResult结果如下,可以看到多余的a和ul标签的样式都没了
感谢你能够认真阅读完这篇文章,希望小编分享的“vue如何去除多余的样式”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。