方案
一、合理配置commonschunkplugin
webpack的資源入口通常是以entry為單元進行編譯提取，那麼當多entry共存的時候，commonschunkplugin的作用就會發揮出來，對所有依賴的chunk進行公共部分的提取，但是在這裡可能很多人會誤認為抽取公共部分指的是能抽取某個**片段，其實並非如此，它是以module為單位進行提取。假設我們的頁面中存在entry1，entry2，entry3三個入口，這些入口中可能都會引用如utils，loadash，fetch等這些通用模組，那麼就可以考慮對這部分的共用部分機提取。通常提取方式有如下四種實現：
1、傳入字串引數，由chunkplugin自動計算提取
new webpack.optimize.commonschunkplugin('common.js')
這種做法缺省會把所有入口節點的公共**提取出來, 生成乙個common.js
2、有選擇的提取公共**
new webpack.optimize.commonschunkplugin('common.js',['entry1','entry2']);
只提取entry1節點和entry2中的共用部分模組, 生成乙個common.js
3、將entry下所有的模組的公共部分（可指定引用次數）提取到乙個通用的chunk中
new webpack.optimize.commonschunkplugin(
});提取所有node_modules中的模組至vendors中，也可以指定minchunks中的最小引用數；
4、抽取enry中的一些lib抽取到vendors中
entry = ;
new webpack.optimize.commonschunkplugin();
新增乙個entry名叫為vendors，並把vendors設定為所需要的資源庫，commonschunk會自動提取指定庫至vendors中。
方案二：通過externals配置來提取常用庫
在實際專案開發過程中，我們並不需要實時除錯各種庫的原始碼，這時候就可以考慮使用external選項了。
簡單來說external就是把我們的依賴資源宣告為乙個外部依賴，然後通過script外鏈指令碼引入。這也是我們早期頁面開發中資源引入的一種翻版，只是通過配置後可以告知webapck遇到此類變數名時就可以不用解析和編譯至模組的內部檔案中，而改用從外部變數中讀取，這樣能極大的提公升編譯速度，同時也能更好的利用cdn來實現快取。
2 在webpack.config.js中加入external配置項：
由於通過external提取過的js模組是不會被記錄到webapck的chunk資訊中，通過librarytarget可告知我們構建出來的業務模組，當讀到了externals中的key時，需要以umd的方式去獲取資源名，否則會有出現找不到module的情況。
方案
三、利用dllplugin和dllreferenceplugin預編譯資源模組
簡單來說dllplugin的作用是預先編譯一些模組，而dllreferenceplugin則是把這些預先編譯好的模組引用起來。這邊需要注意的是dllplugin必須要在dllreferenceplugin執行前先執行一次，dll這個概念應該也是借鑑了windows程式開發中的dll檔案的設計理念。相對於externals，dllplugin有如下幾點優勢：dll預編譯出來的模組可以作為靜態資源鏈結庫可被重複使用，尤其適合多個專案之間的資源共享，如同乙個站點pc和手機版等；dll資源能有效地解決資源迴圈依賴的問題，部分依賴庫如：react-addons-css-transition-group這種原先從react核心庫中抽取的資源包，整個**只有一句話：
module.exports = require('react/lib/reactcsstransitiongroup');
卻因為重新指向了react/lib中，這也會導致在通過externals引入的資源只能識別react,定址解析react/lib則會出現無法被正確索引的情況。由於externals的配置項需要對每個依賴庫進行逐個定製，所以每次增加乙個元件都需要手動修改，略微繁瑣，而通過dllplugin則能完全通過配置讀取，減少維護的成本；
1、配置dllplugin對應資源表並編譯檔案
那麼externals該如何使用呢，其實只需要增加乙個配置檔案：webpack.dll.config.js：
const webpack = require('webpack');
const path = require('path');
const isdebug = process.env.node_env === 'development';
const outputpath = isdebug ? path.join(__dirname, '../common/debug')
: path.join(__dirname, '../common/dist');
const filename = '[name].js';
// 資源依賴包，提前編譯
const lib = [
'react',
'react-dom',
'react-router',
'history',
'react-addons-pure-render-mixin',
'react-addons-css-transition-group',
'redux',
'react-redux',
'react-router-redux',
'redux-actions',
'redux-thunk',
'immutable',
'whatwg-fetch',
'byted-people-react-select',
'byted-people-reqwest' ];
const plugin = [
new webpack.dllplugin(),
new webpack.optimize.occurenceorderplugin() ];
if (!isdebug) ),
new webpack.optimize.uglifyjsplugin(,
compress: ,
output: })
) }module.exports = ,
output:
* 在這次的例子中，將會定義為`window.vendor_library` */
library: '[name]',
librarytarget: 'umd',
umdnameddefine: true },
plugins: plugin };
然後執行命令：
$ node_env=development webpack --config webpack.dll.lib.js --progress
$ node_env=production webpack --config webpack.dll.lib.js --progress
2、dllplugin的靜態資源引入
lib.js和manifest.json存在一一對應的關係，所以我們在呼叫的過程也許遵循這個原則，如當前處於開發階段，對應我們可以引入common/debug資料夾下的lib.js和manifest.json，切換到生產環境的時候則需要引入common/dist下的資源進行對應操作，這裡考慮到手動切換和維護的成本，我們推薦使用add-asset-html-webpack-plugin進行依賴資源的注入，可得到如下結果：
在webpack.config.js檔案中增加如下**：
const isdebug = (process.env.node_env === 'development');
const libpath = isdebug ? '../dll/lib/manifest.json' :
'../dll/dist/lib/manifest.json';
// 將mainfest.json新增到webpack的構建中
module.export = ) ]
}多個工程之間如果需要使用共同的lib資源，也只需要引入對應的lib.js和manifest.js即可，plugin配置中也支援多個webpack.dllreferenceplugin同時引入使用，如下：
module.export = ),
new webpack.dllreferenceplugin()]}
以上內容通過參考其他類似文章以及結合自身的所學彙總而成，不是很全面後期學到新的知識會繼續補全，不斷學習希望自己能夠在前端這條路上越走越遠！！！！
webpack打包構建之效能優化
1 寫es6時需要轉換工具babel，我們可以只需src目錄上轉換 rules 2 靜態資源優化，如果靜態資源不大，建議用位元組處理 module plugins loaders babel loader?cachedirectory 開啟4個執行緒 threads 4 4 使用splitchunk...
webpack效能優化 提公升構建速度
mode可以設定為development和production,預設為production,而production下缺省會開啟tree shaking。此時打包的速度會變慢。webpack打包時，如果你的 中import或者require了別的模組或者第三方庫，webpack會按照一定的規則去搜尋這...
優化Webpack構建效能的幾點建議
webpack 作為目前最流行的前端構建工具之一，在 vue react 等 framework 的生態圈中都佔據重要地位。在開發現代 web 應用的過程中，webpack 和我們的開發過程和發布過程都息息相關，如何改善 webpack 構建打包的效能也關係到我們開發和發布部署的效率。以下是一些關於...