一、寫在前面
面試中問道webpack如何來優(yōu)化前端性能，此時我們該如何回答，下面將總結(jié)一下。
二、優(yōu)化方案
2.1、壓縮代碼
刪除多余代碼，注釋，簡化代碼的寫法等等方式。可以利用webpack的uglifyJsPlugin和ParallelUglifyPlugin來壓縮js文件，利用cssnano來壓縮css資源。
2.2、利用CDN加速：在構(gòu)建過程中，將引用的靜態(tài)資源修改為CDN上對應(yīng)的路徑。我們想引用一個庫，但是又不想讓webpack打包，并且又不影響我們在程序中以CMD、AMD或者window/global全局等方式進行使用，那就可以通過配置externals。

configureWebpack: {
    externals: {
        "vue": "Vue",
        "vue-router": "VueRouter",
        "axios": "axios",
        "moment": "moment",
        "element-ui": "ELEMENT",
    }
}

2.3、Tree shaking:將代碼中永遠不會?到的?段刪除掉。可以通過在啟動webpack時追加參數(shù) --optimize-minimize 來實現(xiàn)。
2.4、Code Splitting將代碼按路由維度或者組件分塊(chunk),這樣做到按需加載,同時可以充分利?瀏覽器緩存。例如vue中的異步組件就是按需加載。
2.5、提取公共第三?庫: 提取公共第三?庫:來進?公共模塊抽取,利?瀏覽器緩存可以?期緩存這些?需頻繁變動的公共代碼。