Webpack 性能優化（一）
一、優化開發體驗，提高開發效率
1.優化構建速度。如果項目很龐大的時候，構建的耗時會變得很長，每次等待構建的耗時加起來是個很大的數目
2.優化使用體驗。通過自動化完成一些重複的工作，讓我們更急專注解決問題本身
二、優化輸出質量。給用戶呈現更好的網頁
1.減少首屏加載的時間（白屏和首屏的計算）
2.提升流暢度，也就是代碼的性能
縮小文件的搜索範圍
（1）根據導入的語句尋找導入的文件
（2）根據導入的文件使用loader去處理文件
優化loader配置(test, include, exclude)
eg: module: {
rules:{
test: /.js$/,
use: [‘babel-loader?cacheDirectory’],
include: path.resolve(__dirname, ‘src’)
}
}
注意： babel-loader 支持緩存轉換出的結果，通過cacheDirectory開啓
我們可以適當調整項目的目錄結構，以便在配置loader時通過include縮小命中的範圍
優化resolve.modules配置（直接在絕對路徑查找，減少查詢）
resolve: {
module: [path.resolve(__dirname, ‘node_module’)]
}
優化resolve.mainFields配置（第三方模塊查詢入口–main）
resolve: {
module: [path.resolve(__dirname, ‘node_module’)],
mainField: [‘main’]
},
優化resolve.alias配置(直接使用單獨的js文件，因爲一般發佈的npm包都有兩套代碼，例如react.js,有套commomJS規範的模塊化代碼，一套把它所有代碼打包打包到一個文件的，默認使用模塊化的，會一直遞歸查找我們需要的文件)
resolve: {
module: [path.resolve(__dirname, ‘node_module’)],
mainField: [‘main’],
alias: {
‘react’: path.resolve(__dirname, ‘./node_modules/react/dist/react.min.js’)
}
},
注意： 但是這樣會影響Tree-Shaking去除無效代碼的優化，之後再講
優化resolve.extensions配置(查詢後綴是否存在)
resolve: {
module: [path.resolve(__dirname, ‘node_module’)],
mainField: [‘main’],
alias: {
‘react’: path.resolve(__dirname, ‘./node_modules/react/dist/react.min.js’)
},
extensions: [‘js’]
}
注意： 1. 嘗試列表儘可能小，不要將不存在的寫在列表裏
2.頻率出現最高的文件後綴要優先放在最前面
3.在項目中寫導入語句儘可能帶上後綴名，避免尋找過程
優化modeule.noParse配置（對於一些沒有模塊化的文件忽略解析處理，但是要注意忽略的模塊中無import,require,define等模塊化的語句）
resolve: {
module: [path.resolve(__dirname, ‘node_module’)],
mainField: [‘main’],
alias: {
‘react’: path.resolve(__dirname, ‘./node_modules/react/dist/react.min.js’)
},
extensions: [‘js’],
noParse: [/react.min.js$/]
}