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