Webpack如何優(yōu)化配置縮小文件搜索范圍

這篇文章將為大家詳細(xì)講解有關(guān)Webpack如何優(yōu)化配置縮小文件搜索范圍，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

Webpack 啟動(dòng)后會(huì)從配置的 Entry 出發(fā)，解析出文件中的導(dǎo)入語句，再遞歸的解析。

在遇到導(dǎo)入語句時(shí) Webpack 會(huì)做兩件事情：

1.根據(jù)導(dǎo)入語句去尋找對(duì)應(yīng)的要導(dǎo)入的文件。例如 require('react') 導(dǎo)入語句對(duì)應(yīng)的文件是 ./node_modules/react/react.js ， require('./util') 對(duì)應(yīng)的文件是 ./util.js 。

2.根據(jù)找到的要導(dǎo)入文件的后綴，使用配置中的 Loader 去處理文件。例如使用 ES6 開發(fā)的 JavaScript 文件需要使用 babel-loader 去處理。

以上兩件事情雖然對(duì)于處理一個(gè)文件非?？?，但是當(dāng)項(xiàng)目大了以后文件量會(huì)變的非常多，這時(shí)候構(gòu)建速度慢的問題就會(huì)暴露出來。

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

接下來一一介紹可以優(yōu)化它們的途徑。

優(yōu)化 loader 配置

由于 Loader 對(duì)文件的轉(zhuǎn)換操作很耗時(shí)，需要讓盡可能少的文件被 Loader 處理。

在 2-3 Module 中介紹過在使用 Loader 時(shí)可以通過 test 、 include 、 exclude 三個(gè)配置項(xiàng)來命中 Loader 要應(yīng)用規(guī)則的文件。

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

以采用 ES6 的項(xiàng)目為例，在配置 babel-loader 時(shí)，可以這樣：

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

你可以適當(dāng)?shù)恼{(diào)整項(xiàng)目的目錄結(jié)構(gòu)，以方便在配置 Loader 時(shí)通過 include 去縮小命中范圍。

優(yōu)化 resolve.modules 配置

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

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

當(dāng)安裝的第三方模塊都放在項(xiàng)目根目錄下的 ./node_modules 目錄下時(shí)，沒有必要按照默認(rèn)的方式去一層層的尋找，可以指明存放第三方模塊的絕對(duì)路徑，以減少尋找，配置如下：

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

優(yōu)化 resolve.mainFields 配置

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

安裝的第三方模塊中都會(huì)有一個(gè) package.json 文件用于描述這個(gè)模塊的屬性，其中有些字段用于描述入口文件在哪里， resolve.mainFields 用于配置采用哪個(gè)字段作為入口文件的描述。

可以存在多個(gè)字段描述入口文件的原因是因?yàn)橛行┠K可以同時(shí)用在多個(gè)環(huán)境中，準(zhǔn)對(duì)不同的運(yùn)行環(huán)境需要使用不同的代碼。

以 isomorphic-fetch 為例，它是 fetch API 的一個(gè)實(shí)現(xiàn)，但可同時(shí)用于瀏覽器和 Node.js 環(huán)境。

它的 package.json 中就有2個(gè)入口文件描述字段：

{
 "browser": "fetch-npm-browserify.js",
 "main": "fetch-npm-node.js"
}

isomorphic-fetch 在不同的運(yùn)行環(huán)境下使用不同的代碼是因?yàn)?fetch API 的實(shí)現(xiàn)機(jī)制不一樣，在瀏覽器中通過原生的 fetch 或者 XMLHttpRequest 實(shí)現(xiàn)，在 Node.js 中通過 http 模塊實(shí)現(xiàn)。

resolve.mainFields 的默認(rèn)值和當(dāng)前的 target 配置有關(guān)系，對(duì)應(yīng)關(guān)系如下：

• 當(dāng) target 為 web 或者 webworker 時(shí)，值是 ["browser", "module", "main"]

• 當(dāng) target 為其它情況時(shí)，值是 ["module", "main"]
  

以 target 等于 web 為例，Webpack 會(huì)先采用第三方模塊中的 browser 字段去尋找模塊的入口文件，如果不存在就采用 module 字段，以此類推。

為了減少搜索步驟，在你明確第三方模塊的入口文件描述字段時(shí)，你可以把它設(shè)置的盡量少。

由于大多數(shù)第三方模塊都采用 main 字段去描述入口文件的位置，可以這樣配置 Webpack：

module.exports = {
 resolve: {
  // 只采用 main 字段作為入口文件描述字段，以減少搜索步驟
  mainFields: ['main'],
 },
};

使用本方法優(yōu)化時(shí)，你需要考慮到所有運(yùn)行時(shí)依賴的第三方模塊的入口文件描述字段，就算有一個(gè)模塊搞錯(cuò)了都可能會(huì)造成構(gòu)建出的代碼無法正常運(yùn)行。

優(yōu)化 resolve.alias 配置

在 2-4 Resolve 中介紹過 resolve.alias 配置項(xiàng)通過別名來把原導(dǎo)入路徑映射成一個(gè)新的導(dǎo)入路徑。

在實(shí)戰(zhàn)項(xiàng)目中經(jīng)常會(huì)依賴一些龐大的第三方模塊，以 React 庫為例，安裝到 node_modules 目錄下的 React 庫的目錄結(jié)構(gòu)如下：

├── dist
│   ├── react.js
│   └── react.min.js
├── lib
│   ... 還有幾十個(gè)文件被忽略
│   ├── LinkedStateMixin.js
│   ├── createClass.js
│   └── React.js
├── package.json
└── react.js

可以看到發(fā)布出去的 React 庫中包含兩套代碼：

• 一套是采用 CommonJS 規(guī)范的模塊化代碼，這些文件都放在 lib 目錄下，以 package.json 中指定的入口文件 react.js 為模塊的入口。

• 一套是把 React 所有相關(guān)的代碼打包好的完整代碼放到一個(gè)單獨(dú)的文件中，這些代碼沒有采用模塊化可以直接執(zhí)行。其中 dist/react.js 是用于開發(fā)環(huán)境，里面包含檢查和警告的代碼。 dist/react.min.js 是用于線上環(huán)境，被最小化了。
  

默認(rèn)情況下 Webpack 會(huì)從入口文件 ./node_modules/react/react.js 開始遞歸的解析和處理依賴的幾十個(gè)文件，這會(huì)時(shí)一個(gè)耗時(shí)的操作。

通過配置 resolve.alias 可以讓 Webpack 在處理 React 庫時(shí)，直接使用單獨(dú)完整的 react.min.js 文件，從而跳過耗時(shí)的遞歸解析操作。

相關(guān) Webpack 配置如下：

module.exports = {
 resolve: {
  // 使用 alias 把導(dǎo)入 react 的語句換成直接使用單獨(dú)完整的 react.min.js 文件，
  // 減少耗時(shí)的遞歸解析操作
  alias: {
   'react': path.resolve(__dirname, './node_modules/react/dist/react.min.js'),
  }
 },
};

除了 React 庫外，大多數(shù)庫發(fā)布到 Npm 倉庫中時(shí)都會(huì)包含打包好的完整文件，對(duì)于這些庫你也可以對(duì)它們配置 alias。
但是對(duì)于有些庫使用本優(yōu)化方法后會(huì)影響到后面要講的 使用 Tree-Shaking 去除無效代碼 的優(yōu)化，因?yàn)榇虬玫耐暾募杏胁糠执a你的項(xiàng)目可能永遠(yuǎn)用不上。

一般對(duì)整體性比較強(qiáng)的庫采用本方法優(yōu)化，因?yàn)橥暾募械拇a是一個(gè)整體，每一行都是不可或缺的。

但是對(duì)于一些工具類的庫，例如 lodash ，你的項(xiàng)目可能只用到了其中幾個(gè)工具函數(shù)，你就不能使用本方法去優(yōu)化，因?yàn)檫@會(huì)導(dǎo)致你的輸出代碼中包含很多永遠(yuǎn)不會(huì)執(zhí)行的代碼。

優(yōu)化 resolve.extensions 配置

在導(dǎo)入語句沒帶文件后綴時(shí)，Webpack 會(huì)自動(dòng)帶上后綴后去嘗試詢問文件是否存在。

在 2-4 Resolve 中介紹過 resolve.extensions 用于配置在嘗試過程中用到的后綴列表，默認(rèn)是：

extensions: ['.js', '.json']

也就是說當(dāng)遇到 require('./data') 這樣的導(dǎo)入語句時(shí)，Webpack 會(huì)先去尋找 ./data.js 文件，如果該文件不存在就去尋找 ./data.json 文件，如果還是找不到就報(bào)錯(cuò)。

如果這個(gè)列表越長，或者正確的后綴在越后面，就會(huì)造成嘗試的次數(shù)越多，所以 resolve.extensions 的配置也會(huì)影響到構(gòu)建的性能。

在配置 resolve.extensions 時(shí)你需要遵守以下幾點(diǎn)，以做到盡可能的優(yōu)化構(gòu)建性能：

• 后綴嘗試列表要盡可能的小，不要把項(xiàng)目中不可能存在的情況寫到后綴嘗試列表中。

• 頻率出現(xiàn)最高的文件后綴要優(yōu)先放在最前面，以做到盡快的退出尋找過程。

• 在源碼中寫導(dǎo)入語句時(shí)，要盡可能的帶上后綴，從而可以避免尋找過程。例如在你確定的情況下把 require('./data') 寫成 require('./data.json') 。

相關(guān) Webpack 配置如下：

module.exports = {
 resolve: {
  // 盡可能的減少后綴嘗試的可能性
  extensions: ['js'],
 },
};

優(yōu)化 module.noParse 配置

在 2-3 Module 中介紹過 module.noParse 配置項(xiàng)可以讓 Webpack 忽略對(duì)部分沒采用模塊化的文件的遞歸解析處理，這樣做的好處是能提高構(gòu)建性能。

原因是一些庫，例如 jQuery 、ChartJS， 它們龐大又沒有采用模塊化標(biāo)準(zhǔn)，讓 Webpack 去解析這些文件耗時(shí)又沒有意義。

在上面的 優(yōu)化 resolve.alias 配置 中講到單獨(dú)完整的 react.min.js 文件就沒有采用模塊化，讓我們來通過配置 module.noParse 忽略對(duì) react.min.js 文件的遞歸解析處理，

相關(guān) Webpack 配置如下：

const path = require('path');
module.exports = {
 module: {
  // 獨(dú)完整的 `react.min.js` 文件就沒有采用模塊化，忽略對(duì) `react.min.js` 文件的遞歸解析處理
  noParse: [/react\.min\.js$/],
 },
};

注意被忽略掉的文件里不應(yīng)該包含 import 、 require 、 define 等模塊化語句，不然會(huì)導(dǎo)致構(gòu)建出的代碼中包含無法在瀏覽器環(huán)境下執(zhí)行的模塊化語句。

關(guān)于“Webpack如何優(yōu)化配置縮小文件搜索范圍”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。