关于css打包后过大的问题

栏目: CSS · 发布时间: 5年前

内容简介:我们很多时候写了一个公共的common.scss,然后在各个vue里面由于加了scoped,导致common里面的样式都加上了并且在多少个vue里面import就会打包多少次common.scss进去,最后导致css打出来很大。

公共代码多次放在scoped内

我们很多时候写了一个公共的common.scss,然后在各个vue里面

<style scoped>
import  '@/assets/css/common.scss'
</style>

由于加了scoped,导致common里面的样式都加上了 [data-v-aaaa] 这样的标识,最后打出来的css重复,这就不是公共css了。

并且在多少个vue里面import就会打包多少次common.scss进去,最后导致css打出来很大。

公共代码多次放在scoped外

下面的代码打包出来只会有一份global.scss,也就是不会重复打包。所以为了方便,直接在main.js引入一次就够了

//a.vue
<style >
@import '@/assets/css/global.scss'
</style>
//b.vue
<style >
@import '@/assets/css/global.scss'
</style>

公共代码放scoped外,自定义代码放scoped内

为了不重复打包,那我把公共的css代码拿出来不放在scoped里面不就好了。

//global.scss
.white{ color:#fff}
//a.vue
<style >
@import '@/assets/css/global.scss'
</style>

但是下面这个情况不行,运行会报错: $white is not defined

// variable.scss
$white:#fff;
//a.vue
<style >
@import '@/assets/css/variable.scss'
</style>
<style scoped>
.white{
    color:$white;
}
<style/>

然后试了一下

<style scoped>
@import '@/assets/css/variable.scss'
.white{
    color:$white;
}
</style>

发现打出来的css里面变量$white直接编译成#fff了,打包后的css里面找不到$white,所以就不用担心会重复打包这些变量了。

IE浏览器对css的约束

之前控制台中心在IE9浏览器下样式混乱。说是IE浏览器对css有些约束

Stylesheet Limits in Internet Explorer

参考博客

然后用了下面两个插件解决。好像也可以设置splitChunk解决,不过试了效果不太满意,后面再继续探究。

optimization: {
    minimizer: [
    new CSSSplitWebpackPlugin({
        size: 4000,
        filename: path.posix.join(assetsDir,'css/[name]-[part].[ext]'),
        }),  
    new OptimizeCSSAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorOptions: { discardComments: {removeAll: true },reduceIdents:false },
        canPrint: true
    }),             
    ]
},

总结:

<style scoped>
//main.js
import '@/views/order/style.scss';
//@/views/order/style.scss
.order{
    xxxxx
}

最后把代码按照上面的方法整理了一下,结果打包出来的css足足小了127kb


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

人工智能

人工智能

李开复、王咏刚 / 文化发展出版社 / 2017-5-10 / CNY 55.00

人工智能已经来了,它就在我们身边,几乎无处不在。 人工智能技术正在彻底改变人类的认知,重建人机相互协作的关系。史无前例的自动驾驶正在重构我们头脑中的出行地图和人类生活图景,今天的人工智能技术也正在翻译、写作、绘画等人文和艺术领域进行大胆的尝试。 我们真的知道什么是人工智能吗? 我们真的准备好与人工智能共同发展了吗? 我们该如何在心理上将人和机器摆在正确的位置? 我们该......一起来看看 《人工智能》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具