webpack打包構建之效能優化

2021-10-11 01:33:48 字數 626 閱讀 3622

1 寫es6時需要轉換工具babel,我們可以只需src目錄上轉換

rules:[

]

2 靜態資源優化,如果靜態資源不大,建議用位元組處理

}] 

}

module:]},

plugins:[

loaders:['babel-loader?cachedirectory'],

//開啟4個執行緒

threads:4

})]

4 使用splitchunk,適合在多入口打包中使用,對公用模組打包時也分別打包到了各自的模組裡面,那麼我們可以把相同的模組提取出來

5 webpack-parallel-uglify-plugin外掛程式可以並行執行uglifyjs外掛程式,這可以有效減少構建時間,可應用於生產環境而非開發環境,從webpack-parallel-uglify-plugin引入paralleluglifyplugin

new

paralleluglifyplugin(,

compress:}}

)

6使用treeshaking實現刪除專案中未被引用的**

webpack系列二 webpack打包優化探索

雖然webpack的已經公升級到了webpack4,而我們目前還在使用webpack3,但其中的優化點都大同小異,公升級後同樣適用。這三條原則永遠是一切優化的前提 1 主要配置 2plugins 3 new webpack.optimize.moduleconcatenationplugin 4 1...

webpack之構建日誌

當我們執行構建命令時候,會出現如下效果 事實上,很多時候我們並不關注這些,只關注是否構建成功和錯誤資訊。下面我們就一起來解決這個需求,讓我們的命令列清爽整潔 通過在webpack.config.js中設定stats 統計資訊stats 只是通過這種方式來設定,當我們構建成功後,命令列什麼都沒有輸出,...

webpack打包vue專案效能優化

專案打包上線設定productionsourcemap為false減小.map檔案所佔dist檔案的體積 開啟gzip對dist檔案進一步壓縮 ps 需後端配合開啟gzip方可使用 使用cdn減小打包後vendor.js的體積,從而縮短首屏載入時間 ps 第3步如果注釋掉出現錯誤可以不進行注釋 按需...