Webpack 4教程 - 第四部分,使用SplitChunksPlugin分離代碼

轉載請註明出處:葡萄城官網,葡萄城爲開發者提供專業的開發工具、解決方案和服務,賦能開發者。
原文出處:https://wanago.io/2018/06/04/code-splitting-with-splitchunksplugin-in-webpack-4/

Webpack 4 給我們帶來了一些變化。其中包括更快地打包,引入了SplitChunksPlugin,並淘汰掉之前的CommomsChunksPlugin。在本文,你將學習如何拆分輸出代碼以提高應用的性能。

代碼分離的思想

先說重要的:在Webpack中,到底什麼是代碼分離?代碼分離允許你把代碼拆分到多個文件中。如果使用得當,你的應用性能會提高很多。因爲瀏覽器能緩存你的代碼。

每當你做出一次修改,包含修改的文件需要被所有訪問你網站的人重新下載。但你並不會經常修改應用的依賴庫(譯者注:你常修改的是你的業務邏輯)。如果你能把那些依賴庫拆分到完全分離的文件中,即使業務邏輯發生了更改,訪問者也不需要再次下載依賴庫,直接使用之前的緩存就可以了。

使用Webpack時,你會得到一個或多個生成的輸出文件,這些文件包含了我們源碼的最終輸出。而它們由代碼塊(chunks)組成。

入口(Entry)

入口定義了我們代碼中應用是從哪裏開始執行的,這也是Webpack開始打包的地方。你可以定義一個入口(常見於單頁應用),或者多個入口(常見於多頁應用)。

定義一個入口,就會得到一個chunk。如果你只使用字符串定義一個入口,那麼這個chunk名爲main。如果你使用對象定義了多個入口,那麼它們會以entry對象的屬性來命名。下面的例子會得到相同的chunk:

複製代碼

// 例1
entry: './src/index.js'
// 例2
entry: {
  main: './src/index.js'
}

複製代碼

輸出(Output)

在配置文件中,輸出配置是一個對象,它指明瞭Webpack應該在哪兒和如何對我們的打包結果和資源進行輸出。雖然可能有多個入口,但是只能有一個輸出配置對象。而chunk名稱的用處,就在於根據入口對應不同的輸出。你可以爲我們的打包輸出定義一個固定的文件名,但若想代碼分離,就不應該這麼做。你可以使用[name]爲我們的輸出文件創建文件名的模板:

output: {
  filename: '[name].[chunkhash].bundle.js',
  path: path.resolve(__dirname, 'dist')
}

一件值得注意的重要東西是[chunkhash]:它是一個基於文件內容的屬於特定chunk的哈希值。它僅會隨着文件內容的改變而改變。因此,瀏覽器就可以利用這一點來緩存它。如果打包輸出的文件名變了,瀏覽器就知道自己需要重新下載它。一個chunkhash可能長這樣:0c553ebfd158e16da428。

我們的主chunk會被打包進一個叫main.[chunkhash].bundle.js的文件。

SplitChunksPlugin

由於有了SplitChunksPlugin,你可以把應用中的特定部分移至不同文件。如果一個模塊在不止一個chunk中被使用,那麼利用代碼分離,該模塊就可以在它們之間很好地被共享。這是Webpack的默認行爲。

複製代碼

// utilities/users.js
export default [
  { firstName: "Adam", age: 28 },
  { firstName: "Jane", age: 24 },
  { firstName: "Ben",  age: 31 },
  { firstName: "Lucy", age: 40 }
]
// a.js
import _ from 'lodash';
import users from './users';

const adam = _.find(users, { firstName: 'Adam' });
// b.js
import _ from 'lodash';
import users from './users';

const lucy = _.find(users, { firstName: 'Lucy' });
// webpack.config.js
module.exports = {
  entry: {
    a: "./src/a.js",
    b: "./src/b.js"
  },
  output: {
    filename: "[name].[chunkhash].bundle.js",
    path: __dirname + "/dist"
  }
};

複製代碼

如果運行它,你會看到Webpack創建了兩個文件:a.[chunkhash].bundle.js和b.[chunkhash].bundle.js,而且每一個文件都包含對lodash庫的拷貝:這並不好!我之前說過,爲共享的庫創建分離的文件是Webpack的一個默認行爲,但這隻涉及異步的chunk,即意味着只作用於我們異步引入的那些文件。我們會在介紹懶加載的時候討論這個話題。爲了使這個默認行爲能支持所有類型的chunks,我們需要稍微改一下Webpack的配置:

複製代碼

// webpack.config.js
module.exports = {
  entry: {
    a: "./src/a.js",
    b: "./src/b.js"
  },
  output: {
    filename: "[name].[chunkhash].bundle.js",
    path: __dirname + "/dist"
  },
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  },
};

複製代碼

現在我們看到,創建了額外的vendors~a~b.[chunkhash].bundle.js文件,它包含了lodash庫的代碼。這是因爲我們默認有一些cacheGroups配置:

複製代碼

splitChunks: {
  chunks: "all",
  cacheGroups: {
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10
    },
    default: {
      minChunks: 2,
      priority: -20,
      reuseExistingChunk: true
    }
  }
}

複製代碼

首先,是vendors,它包含的文件來自於你node_modules。再者,是所有其他共享模塊的默認緩存組。這裏有一個小點:有一些冗餘。a.[chunkhash].bundle.js和b.[chunkhash].bundle.js都包含了users.js的內容。這是因爲,SplitChunksPlugin默認地只會分離大於30Kb的文件。我們可以輕鬆地修改它:

複製代碼

// webpack.config.js
module.exports = {
  entry: {
    a: "./src/a.js",
    b: "./src/b.js"
  },
  output: {
    filename: "[name].[chunkhash].bundle.js",
    path: __dirname + "/dist"
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 0 // 修改了這裏
    }
  }
};

複製代碼

結果是,它新創建了屬於默認緩存組的名爲a~b.[chunkhash].bundle.js的文件。因爲我們的users.js文件所佔空間遠遠小於30Kb,在沒有修改minSize屬性的情況下,它不會被打包到單獨的分離文件。在真實環境下,這是一件好事,因爲這樣不會帶來實質的性能提升,反而會強制瀏覽器爲分離出的文件(它現在是很小的)再發一次額外的請求。

我們可以進一步,爲僅在utilities目錄下的做特殊處理:

複製代碼

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    a: "./src/a.js",
    b: "./src/b.js"
  },
  output: {
    filename: "[name].[chunkhash].bundle.js",
    path: __dirname + "/dist"
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        utilities: {
          test: /[\\/]src[\\/]utilities[\\/]/,
          minSize: 0
        }
      }
    }
  }
};

複製代碼

這樣我們的輸出包含4個文件:a.[chunkhash].bundle.js,b.[chunkhash].bundle.js,vendors~a~b.[chunkhash].bundle.js和utilities~a~b.[chunkhash].bundle.js。(譯者注:這需要在打包之前,把users.js文件移至./src/utilities目錄下,並修改a.js和b.js中的相關引用路徑)。雖然我們現在可以讓minSize:0成爲全局設置(即放在splitChunks對象中作爲其屬性),但即使這樣,默認的緩存組也不會被創建。因爲,所有可能被引入的文件都應該在我們剛創建的utilities組下。這個組具的優先級是0,高於默認緩存組的優先級。你可能已經注意到了,默認緩存組的優先級被設置爲了-20。

還有其他的配置供你使用,可查看SplitChunksPlugin文檔

總結

即使你只有一個入口(常發生於大多數單頁應用中),把你的依賴放入一個獨立的文件依然是個好主意。這其實很容易做到,因爲使用SplitChunksPlugin是Webpack 4的默認行爲,可能你設置一下chunks: 'all'就足夠了。如果你想讓我討論此相關話題,歡迎留言。很快我們將會學習如何使用懶加載,讓你的應用性能更上一層樓。敬請期待!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章