性能優化小冊 - 分類構建：利用好 webpack hash

藉助 wepack 的 hash 命名法，不只能夠提升咱們項目的構建效率，在生產環境中，合理設置 hash 類型有助於咱們對資源進行有效的緩存。

webpack hash 種類

當無情面試官問 webpack 有幾種 hash 類型？

1. hash - 工程級

   若是出口文件設置的類型是 hash 則每次修改任何文件，全部文件名的 hash 都會跟着改變。（不能有效利用緩存）

2. chunkhash - 模塊級

   根據不一樣的入口文件進行依賴文件解析、構建對應的 chunk，生成對應的 hash 值。

3. contenthash - 文件內容級

   由文件內容產生的 hash 值，內容不一樣產生的 contenthash 值也不同。

如何設置 hash 達到項目優化的目的？

js 文件分類構建，設置 chunkhash

首先使用 CommonsChunkPlugin 插件提取第三方庫和公衆模塊，進行單獨打包構建：

plugins: [
  new webpack.optimize.CommonsChunkPlugin({ 
    name: 'vendor',
    minChunks (module) {
      return (
        module.resource &&
        /\.js$/.test(module.resource) &&
        module.resource.indexOf(
          path.join(__dirname, '../node_modules')
        ) === 0
      )
    }
  }),
]

接着咱們在 output 對 filename 和 chunkFilename 兩個字段設置 chunkhash ，生成對應 hash 值：

output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'js/[name].[chunkhash].js', 
  chunkFilename: 'js/[id].[chunkhash].js' // chunkFilename 是處理異步模塊的
},

經過設置 chunkhash 最後打包出來的 js 文件會生產三種 chunkhash：

1. 正常引入的 js 文件對應的 hash
2. 異步加載的 js 文件（若是在項目中存在的話）對應的 hash
3. 提取的三方庫和公共模塊對應的 hash

那麼只要對應的 js 文件代碼不改動，就能夠保證其 chunkhash 值不會受影響，從而達到瀏覽器的持久緩存。

抽離 css，設置 contenthash

首先，使用 ExtractTextPlugin 插件將全部的入口 chunk 中引用的 *.css，抽離到獨立的 css 文件夾中。

抽離以後的樣式將再也不內嵌到 JS bundle 中，而是會放到一個單獨的 CSS 文件當中，若是樣式文件大小較大，這會作更快提早加載，由於 CSS bundle 會跟 JS bundle 並行加載。

plugins: [
  new ExtractTextPlugin({
    filename: 'css/[name].css',
    allChunks: true
  }),
]

以後對 css 文件進行 contenthash 命名：

plugins: [
  new ExtractTextPlugin({
    filename: 'css/[name].[contenthash].css',
    allChunks: true
  }),
]

針對 css 文件會生產對應的 contenthash 值，只要 css 文件內容沒有修改，那麼 contenthash 值就一直保持不變，以有效的利用瀏覽器緩存。

css 文件能夠設置成 chunkhash 嗎？

答案是不要這麼作，由於 chunkhash 是模塊級，咱們是將樣式做爲模塊 import 到 js 文件中，因此它們的 chunkhash 是一致的。

即 js 和所引入的 css 共用同一個 chunkhash，只要 js 改變，與其關聯的 css 文件對應的 chunkhash 值也會改變，但可能其內容並無改變，因此達不到緩存的效果。

這是 「性能優化小冊」 系列第二篇小記，歡迎關注。