提高webpack構建速度

減小resolve解析

resolve: {
modules: [
    path.resolve(__dirname, 'node_modules'), // 使用絕對路徑指定 node_modules，不作過多查詢
],

// 刪除沒必要要的後綴自動補全，少了文件後綴的自動匹配，即減小了文件路徑查詢的工做
// 其餘文件能夠在編碼時指定後綴，如 import('./index.scss')
extensions: [".js"], 

// 避免新增默認文件，編碼時使用詳細的文件路徑，代碼會更容易解讀，也有益於提升構建速度
mainFiles: ['index'],
}

---

把 loader 應用的文件範圍縮小,只在最少數必須的代碼模塊中去使用必要的 loader

rules: [ 
  {
    test: /\.jsx?/,
    include: [ 
      path.resolve(__dirname, 'src'), 
      // 限定只在 src 目錄下的 js/jsx 文件須要經 babel-loader 處理
      // 一般咱們須要 loader 處理的文件都是存放在 src 目錄
    ],
    use: 'babel-loader',
  },
  // ...
],

---

減小 plugin 的消耗,webpack 的 plugin 會在構建的過程當中加入其它的工做步驟，若是能夠的話，適當地移除掉一些沒有必要的 plugin。

• webpack 4.x 的 mode，區分 mode 會讓 webpack 的構建更加有針對性，更加高效。例如當 mode 爲 development 時，webpack 會避免使用一些提升應用代碼加載性能的配置項，如 UglifyJsPlugin，ExtractTextPlugin 等，這樣能夠更快地啓動開發環境的服務，而當 mode 爲 production 時，webpack 會避免使用一些便於 debug 的配置，來提高構建時的速度，例如極其消耗性能的 Source Maps 支持。