Vue loader 開啟壓縮後的一些坑

在使用vue-loader 配合webpack 對.vue檔案進行載入的時候，如果開啟了**壓縮會出來下面

幾種問題，做個記錄。

1td>
2td>
3td>
4td>
tr>
table>

最終壓成:

12

34
tr>
table>

這樣就會造成頁面的布局混亂

解決方法:

配置

//設定vue-html-loader中的引數removeoptionaltags=false
module:,
vue: 
}//hell

壓縮前

壓縮後

如果有.text這樣的選擇器，就會失效

解決方法:

//和上面類似加上removeredundantattributes=false

module:,
vue: 
}

壓縮前

壓縮後

這會導致所繫結的判斷方法直接被刪除了,所有的checkbox都被選中

解決方法可以有兩個:

1.跟上面一樣:設定引數讓vue-html-loader不要去截斷這個

html: 'vue-html-loader?collapsebooleanattributes=false'

但是這個會帶來另外的問題：如果你自自定義控制項中也用了checked/multiple 這種預設的屬性，

它會自動給他補全了。如：

壓縮前

你在slefcomponent裡面定義的prop.multiple 是乙個bool型別
壓縮後這裡直接導致了程式的出錯

2.第二種方法可以避免這種情況

不修改vue-html-loader的collapsebooleanattributes

該用v-bind來繫結控制項(自定義控制項，原生控制項)的屬性

關於vue loader的配置

use strict const vueloaderplugin require vue loader lib plugin var minics tractplugin require mini css extract plugin const stylelintplugin require st...

開啟gzip壓縮

前端gzip壓縮一直都是必備的，簡單又能能壓縮不少的檔案體積，用了好久了今天記錄一下。我們伺服器用的nginx，進入伺服器下nginx.conf檔案，gzip on gzip min length 1k gzip buffers 4 16k gzip comp level 4 壓縮程度，1 9，建議...

開啟Apache的gzip壓縮

我自己寫過的乙個專案中，最後打包出1.37m，可以說是挺大了，我在移動端測試的時候也是，載入速度非常慢。所以，在我開啟apache的gzip壓縮之後 必須的，就像乙個開關一樣，告訴apache對傳輸到瀏覽器的內容進行壓縮 setoutputfilter deflate deflatecompress...