Webpack 啟動后會從配置的 Entry 出發，解析出文件中的導入語句，再遞歸的解析。

在遇到導入語句時 Webpack 會做兩件事情：

1.根據導入語句去尋找對應的要導入的文件。例如 require('react') 導入語句對應的文件是 ./node_modules/react/react.js ， require('./util') 對應的文件是 ./util.js 。

2.根據找到的要導入文件的后綴，使用配置中的 Loader 去處理文件。例如使用 ES6 開發的 JavaScript 文件需要使用 babel-loader 去處理。

以上兩件事情雖然對于處理一個文件非常快，但是當項目大了以后文件量會變的非常多，這時候構建速度慢的問題就會暴露出來。

雖然以上兩件事情無法避免，但需要盡量減少以上兩件事情的發生，以提高速度。

接下來一一介紹可以優化它們的途徑。

優化 loader 配置

由于 Loader 對文件的轉換操作很耗時，需要讓盡可能少的文件被 Loader 處理。

在 2-3 Module 中介紹過在使用 Loader 時可以通過 test 、 include 、 exclude 三個配置項來命中 Loader 要應用規則的文件。

為了盡可能少的讓文件被 Loader 處理，可以通過 include 去命中只有哪些文件需要被處理。

以采用 ES6 的項目為例，在配置 babel-loader 時，可以這樣：

module.exports = { module: {  rules: [   {    // 如果項目源碼中只有 js 文件就不要寫成 //.jsx?$/，提升正則表達式性能    test: //.js$/,    // babel-loader 支持緩存轉換出的結果，通過 cacheDirectory 選項開啟    use: ['babel-loader?cacheDirectory'],    // 只對項目根目錄下的 src 目錄中的文件采用 babel-loader    include: path.resolve(__dirname, 'src'),   },  ] },};

你可以適當的調整項目的目錄結構，以方便在配置 Loader 時通過 include 去縮小命中范圍。

優化 resolve.modules 配置

在 2-4 Resolve 中介紹過 resolve.modules 用于配置 Webpack 去哪些目錄下尋找第三方模塊。

resolve.modules 的默認值是 ['node_modules'] ，含義是先去當前目錄下的 ./node_modules 目錄下去找想找的模塊，如果沒找到就去上一級目錄 ../node_modules 中找，再沒有就去 ../../node_modules 中找，以此類推，這和 Node.js 的模塊尋找機制很相似。

當安裝的第三方模塊都放在項目根目錄下的 ./node_modules 目錄下時，沒有必要按照默認的方式去一層層的尋找，可以指明存放第三方模塊的絕對路徑，以減少尋找，配置如下：

module.exports = { resolve: {  // 使用絕對路徑指明第三方模塊存放的位置，以減少搜索步驟  // 其中 __dirname 表示當前工作目錄，也就是項目根目錄  modules: [path.resolve(__dirname, 'node_modules')] },};

優化 resolve.mainFields 配置

在 2-4 Resolve 中介紹過 resolve.mainFields 用于配置第三方模塊使用哪個入口文件。