關於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
    }),             
    ]
},

總結：

1. 把css變量單獨拎出來作一個文件variable.scss，在vue的<style scoped>裏@import使用
2. 公共css文件在main.js裏面直接import一次就好，不要再在其餘vue裏面import
3. 多人協做防止衝突，各組件的公共css文件我以爲能夠在外面用一個本身的class包裹起來。例如

//main.js
import '@/views/order/style.scss';

//@/views/order/style.scss
.order{
    xxxxx
}

最後把代碼按照上面的方法整理了一下，結果打包出來的css足足小了127kb
------------------2019/2/19更新------------------

注意：以前在想，既然<style></style>(不用scoped)放在哪裏均可以全局生效，那我隨便放在一個大組件裏也行啊。
最近發如今一個組件裏面不用scoped地引入css,從這個組件進去另外一個組件，另外一個組件確實是會受到前者css的影響。
可是若是直接打開後者組件的頁面，不通過前者，css無效。因此全局css仍是放在main裏面好。

------------------2019/2/27更新------------------

關於上面 webpack打包後體積依然過大的css文件的問題我發現還有一種解決方法：使用懶加載，使用方法以下：
Lazy Loading in Vue using Webpack's Code Splitting

懶加載會把每一個vue組件變成一個chunk,天然對應css也會變成一個chunk。感受這個方法比較不錯
有一個地方比較特殊：組件上要用ref引用的話，這個組件不可使用懶加載https://lry1994.github.io/stu...。

對於其餘庫文件的話，能夠設置splitchunk.maxSize進行切割