最近做了個webpack+vue的項目，發現打包後的頁面體積有點超出預期的大。為了減少請求量， 頁面的js和css都是内聯在html裡面的，檢視生成的html代碼後發現，異步引入的vue子產品中的css 也被打在了頁面上面。頁面體積可是影響加載速度的關鍵，趕緊google後解決了這個問題。這裡記錄下。
大部分使用過webpack的朋友都知道，抽離css需要使用到webpack的插件extract-text-webpack-plugin，vue也不例外。官方給的vue-loader的文檔裡面有這樣的描述
OK,這樣打包後，我們把每個entry裡面使用到的css代碼都單獨打包出來了，這時候可以選擇
使用html-webpack-plugin生成帶css 連結的html，也可以使用html-webpack-inline-source-
plugin把css内聯到html裡面(減少請求數量，在移動端很有用)
然而會發現，異步引入的vue檔案裡面import的css，也會被抽離出來，打包内聯到html裡面，
怎麼解決這個問題呢。其實很簡單，就是使用loader的include參數，指定loader的作用檔案夾，
對不想抽離css的檔案，使用style-loader和css-loader。就像這樣
這裡配置對page目錄下的代碼，抽離出css，對components裡面引用的代碼，内聯在js裡面。
這樣異步加載components的css就不會被打包到首屏的html裡面了，頁面體積減少，加載速度自然
就上去了。
下面附修改前後的對比。
修改前
修改後
很明顯，修改後html的體積變小了，然而值得注意的是，修改後html+js的體積大于修改前，
這是因為css在js裡面儲存，需要更多的字元去表示，是以總體積變大了。把chunkjs裡面的css
把chunkjs裡面的css再抽離單獨加載也是一個不錯的注意。
不過怎麼做效果好，還是要實際測試一下。