其實說到效能優化，他的範圍太廣了，今天我們就只聊一聊通過webpack配置減少http請求數量這個點吧。
簡單說下工作中遇到的問題吧，我們做的乙個專案中首頁用了十多張，每張都是乙個靜態資源，所以都會有http請求，為了減少請求，我們可以通過base64編碼的方法來展示。webpack中有乙個包叫做url-loader，他可以將html以及css中的打包成base64，但是js中如果有url並不能編譯成功（後面我會說明），現附上兩張圖看下普通以及base64編碼後的有啥不同吧。
簡單點說，base64就是一串加密的字串。而且base64編碼過的是沒有http請求的（注意看此圖，為什麼有的圖使用的base64有的卻沒有，這是有原因的，這個我們稍後解釋）。
好吧，現在先回到我們的主角——url-loader，簡單看下他的配置引數吧。
我用的是vue-cli腳手架工具，所以這個實在webpack.base.config,js中配置的，test就是正則匹配格式，loader是使用url-loader，options是配置選項，比如我們一般會把小於8kb的才做base64轉換，這個東西通過limit來控制（當然我們是小於100kb），name就是自定義image的路徑以及name，include就是你想讓哪個資料夾裡面的進行url-loader轉換，建議寫上include，如果不寫就會全域性搜尋，效率低下，而且資料夾不寫全也會報錯。當然還有一種格式是可以直接寫到loader中的，就是以query的形式去拼裝options。 在這裡具體看下咱們配置的name屬性吧，他是配合config檔案中的那一堆assetspath來用的， index必須是本地檔案系統上的絕對路徑。assetsroot是所有靜態資源的根路徑（必須是絕對路徑）
assetssubdirectory是被webpack編譯處理過的檔案，比如我們要使用url-loader處理image
assetspublicpath這個是http伺服器執行的根路徑（比如我們線上是www.baidu.com/indexbeta這個作為根路徑，就需要將它改為'/indexbeta/'）。
最終線上就會呈現這種path
現在我們知道打包後的image-url是根據這些配置引數以及url-loader的name來生成的。然後問題又來了，既然有這個好東西，是不是可以讓所有的都展示base64，這肯定不行，因為上面那張編碼過的png只有不到5kb，太大的話base64字串會更長，所以還不如用http請求，這也就是為什麼預設limit是10000了，就是讓8kb之內的才編碼。
但我們的專案中有的列表是用v-for遍歷出來的，也就是url放到了js中（vue檔案的data裡），這樣就不能被base64編碼了，url-loader只會去編譯html以及css中的image。所以可以使用import的方式通過乙個變數去接受，然後將這些變數放到v-for中去渲染。
當我們使用base64轉碼後，首頁的渲染時間縮短了2秒，是不是很給力呢。
webpack外掛程式配置及常用外掛程式
plugins new webpack.provideplugin new webpack.ignoreplugin locale moment 有的外掛程式是開發模式不用，到生產模式下才用,可如下設定 production 指生產模式 new webpack.optimize.uglifyjspl...
webpack 外掛程式總結歸類
自動生成html，基本用法 new htmlwebpackplugin 複製 拷貝資源外掛程式 基本用法 new copywebpackplugin 複製 倆個外掛程式效果一致，都是生成編譯結果的資源單，只是資源單的資料結構不一致而已。webpack manifest plugin 基本用法 mod...
webpack 外掛程式總結歸類
自動生成html，基本用法 new htmlwebpackplugin 拷貝資源外掛程式 基本用法 new copywebpackplugin 倆個外掛程式效果一致，都是生成編譯結果的資源單，只是資源單的資料結構不一致而已。webpack manifest plugin 基本用法 module.ex...