?webpack優(yōu)化前端性能是指優(yōu)化webpack的輸出結(jié)果,讓打包的最終結(jié)果在瀏覽器運(yùn)?快速?效。
1. 壓縮代碼:刪除多余的代碼、注釋、簡(jiǎn)化代碼的寫法等等?式。可以利?webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 來(lái)壓縮JS?件, 利? cssnano (css-loader?minimize)來(lái)壓縮css
2. 利?CDN加速: 在構(gòu)建過(guò)程中,將引?的靜態(tài)資源路徑修改為CDN上對(duì)應(yīng)的路徑??梢岳?webpack對(duì)于 output 參數(shù)和各loader的 publicPath 參數(shù)來(lái)修改資源路徑
3. Tree Shaking: 將代碼中永遠(yuǎn)不會(huì)?到的?段刪除掉??梢酝ㄟ^(guò)在啟動(dòng)webpack時(shí)追加參數(shù) --optimize-minimize 來(lái)實(shí)現(xiàn)
4. Code Splitting: 將代碼按路由維度或者組件分塊(chunk),這樣做到按需加載,同時(shí)可以充分利?瀏覽器緩存
5. 提取公共第三?庫(kù): SplitChunksPlugin插件來(lái)進(jìn)?公共模塊抽取,利?瀏覽器緩存可以?期緩存這些?需頻繁變動(dòng)的公共代碼