webpack 作為目前最流行的前端構建工具之一，在 vue/react 等 framework 的生態圈中都佔據重要地位。在開發現代 web 應用的過程中，webpack 和我們的開發過程和發布過程都息息相關，如何改善 webpack 構建打包的效能也關係到我們開發和發布部署的效率。
以下是一些關於優化 webpack 構建效能的幾點建議：
webpack 的 devtool 配置，決定了在構建過程中怎樣生成 sourcemap 檔案。通常來說eval的效能最高，但是不能生成的 sourcemap 檔案解析出來的**，和源**差異較大。 source-map 的效能較差，但是可以生成原始版本的**。 在大多數 development 場景下 cheap-module-eval-source-map 是最佳的選擇。
下圖是各個 devtool 配置的對比（+號越多，代表速度越快，-號越多，代表速度越慢, o代表中等速度）
注意* ： 在 production 配置中，如果需要生成 sourcemap 檔案來進行異常分析， 應該使用 hidden-source-map 或者 nosources-source-map, source-map 等配置。並且不要把 sourcemap 檔案也放在部署目錄下。
webpack 和一些 plugin/loader 都有 cache 選項。開啟 cache 選項，有利用提高構建效能。
比如：使用 babel-loader 的時候開啟 cachedirectory 選項，會較為明顯的提公升構建速度
module: ]比如 lodash 就支援部分引入：}
import isarray from 'lodash/isarray';參考： [don't import whole lodash] (
在進行這一優化手段的時候，可以借助視覺化工具進行 chunk 體積和內容的分析。方便進一步調整 webpack 的配置。主要有以下兩種方法：
```bash使用 webpack-visualizer 進行分析：webpack --profile --json > stat.json
```
2. 使用第三方 plugin，在編譯過程中進行體積分析，並且以圖表方式輸出：
推薦使用 webpack-bundle-analyzer:
在使用 loader 的時候，通過指定 exclude 和 incude 選項，減少 loader 遍歷的目錄範圍，從而加快 webpack 編譯速度。
比如指定 babel-loader 只處理業務**：
resolve.alias 可以配置 webpack 模組解析的別名，對於比較深的解析路徑，可以對其配置 alias. 可以提公升 webpack 的構建速度。alias:webpack 的 dllplugin 和 dllreferenceplugin 是在新版本中推出的 plugin，其思路就是把改變頻率比較小的第三方庫等依賴單獨打包構建，在打包整個專案的時候，如果解析到了通過 dll 形式進行打包的依賴，會在正常的打包過程中跳過，同時把對這些依賴的引入匯入到 dll 模組上去。 這樣會大大提公升在對業務**進行打包時候的速度。
1. 新建乙個單獨的 webpack 配置檔案，比如 webpack.dll.config.js
2. 在這個配置檔案中，使用 webpack dllplugin 生成 manifest.json 檔案和 dll 模組檔案。也可以引入諸如 uglifyplugin 對第三方依賴進行壓縮等處理。
import path from 'path';3. 在正常的 webpack 配置檔案中，使用 webpack dllreferenceplugin 解析上一步生成的 manifest.jsonimport pkg from './package.json';
import webpack from 'webpack';var vendorpackages = object.keys(pkg.dependencies);const config = ,
output: ,
plugins: [ new webpack.dllplugin(), new webpack.optimize.uglifyjsplugin(),
]} export default config;
new webpack.dllreferenceplugin()在具體的使用過成中， 在 dll 中包含的依賴沒有變化的場景下，可以先執行單次 webpack --config webpack.dll.config.js。然後可以多次執行業務**的構建過程。由於把第三方依賴進行了剝離，業務**的構建會快很多。
以下是一些關於 webpack 構建效能的文章：
2）: prefetchplugin 的使用
3）: webpack 打包分析與效能優化
4）: webpack 使用優化
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 構建打包的效能也關係到我們開發和發布部署的效率。以下是一些關於...