webpack 優化筆記

webpack4 自帶的優化包括 swingTree(搖擺樹)和作用域提升

• swingTree
  比如入口文件 index.js引入通用方法 util, 裏面有 10個方法, 通過 import只用到了兩個。
  那麽剩余的 8個, 會在打包的時候搖擺(刪除)掉。

  util.js

    function a() {}
    function b() {}
    function c() {}
    function d() {}
  
    export default {
      a,
      b,
      c,
      d
    }

  index.js

    import utils from ‘./util‘
    utils.a()
    utils.b()
   
  

  webpack在構建的時候, 會把 c、d沒用到的函數搖擺掉。

webpack 配置的優化

• noParse
  
• exclude|include
• IgnorePlugin
• DllPlugin_拆分bundles
• splitChunks拆分塊插件

noParse

type: RegExp|[RegExp]|function

防止 webpack 解析那些任何與給定正則表達式相匹配的文件。忽略的文件中不應該含有 import、require等調用。
忽略大型的 library 可以提高構建性能。

比如你引入一個 jquery庫, 只想用 jquery的功能,不需要jquery通過import或require引入的其它庫。提升構建性能。

  module.exports = {
    module: {
      // noParse: /jquery|lodash/,
      // webpack.3.0.0支持函數
      noPaese: content => /jquery|lodash/.test(content)
    }
  }

exclude|include

exclude: 表示哪些目錄中的文件需要進行 loader轉換
include: 表示哪些目錄中的文件不需要進行 loader轉換

比如使用 loader處理scss的時候, 我可以忽略的 node_modules中的, 只轉換 src目錄下的 scss文件。

  module.exports = {
    module: {
      rules: [
        {
          test: /\.scss$/,
          exclude: /node_modules/, // node_modules中的scss文件不需要 loader轉換
          include: path.resolve(__dirname, ‘src‘), // src目錄下的文件需要 loader轉換
          use: [
            ‘style-loader‘,
            ‘css-loader‘,
            ‘sass-loader‘
          ]
        }
      ]
    }
  }

設置好exclude和include可以優化打包時間。

IgnorePlugin

IgnorePlugin 是 webpack自帶的一個插件。 創建實例時可以傳遞兩個參數

  const webpack = require(‘webpack‘) 

  module.exports = {
    plugins: [
      new webpack.IgnorePlugin(requestRegExp, contextRegExp) 
    ]
  }

requestRegExp: 匹配資源請求路徑的正則表達式
contentRegExp: (可選的) 匹配資源上下文(目錄)的正則表達式

根據 webpack官網給出的一個例子:
假如, 現在我項目中需要用到一個處理時間的庫, 我選中了 moment時間庫。
我通過 npm 安裝 這個時間庫, 它有一個語言包也一同下載到了 node_modules目錄下的moment/locale文件夾中。 而這個時間庫內部直接通過 require()引入了本地的這個時間庫,而且超級大。100多個國家的語言,而我的項目中只需要zh-cn語言包就可以了。怎麽辦?

可以使用 IgnorePlugin這個插件,如下配置
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

第一個參數是構建的時候, 忽略通過 ./locale引入的文件, 第二個參數是:引入的這個文件是在哪個目錄下引入的。 而 ./locale是再 moment目錄下的文件。

你可以通過手動按需引入你需要的語言包。 比如:
入口文件:

  import zhCn from ‘moment/locale/zh-cn.js‘

DllPlugin_拆分bundles

DllPlugin_拆分bundles文章鏈接

splitChunks拆分塊插件

註意:
被splitChunks的代碼必須使用才可以,如果一個輔助函數,你只導入不調用不計入到minChunks。

webpack4.x中使用 splitChunks取代了 CommonsChunkPlugin插件。
通俗一點講就是 splitChunks 拆分代碼塊,提取公用的代碼。防止重復打包。
提取被重復引入的文件，單獨生成一個或多個文件，這樣避免在多入口重復打包文件。

問題: splitChunks 可以和 DLLPlugins 並存嗎?

將多入口共用的代碼提取為一個塊。需要mode設為production

webpack配置

   module.exports = {
     mode: ‘production‘,
     entry: {
       index: ‘./src/index.js‘,
       main: ‘./src/main.js‘
     },
    output: {
      path: path.resolve(__dirname, ‘dist‘),
      filename: ‘[name].js‘
    },
    // 配置splitChunks
    // webpack 自帶優化項
    optimization: {
      splitChunks: {
        // 抽離
        checkGroups: {
          vendors: {
            maxSize: 0,
            chunks: ‘all‘,
            minChunks: 2,
            automaticNameDelimiter: ‘_‘,
          }
        }
      }
    }
   }

運行 npx webpack, 除了生成 index.js、main.js,還會生成一份共用的代碼塊vendors_index_main.js文件。

配置項:
cacheGroups: 自定義配置,主要使用它來決定生成的文件。
cacheGroups.test: 限制範圍,主要是正則,匹配文件夾或文件。
name: 拆分塊的名稱,默認將根據塊和緩存組鍵自動生成名稱,上面是根據 vendors和入口文件的名稱組和的。
priority: 優先級。
minSize: 要生成塊的最小大小字節。 默認為 30000。可以設置為0。
minChunks: 指的是被不同的entry 引入的次數。如果為1時,適合分離第三方庫node_modules。
automaticNameDelimiter: 拆分塊名稱的鏈接符,這裏時_,所以生成的塊名稱為 vendors_index_main.js。
chunks: 這表示將選擇哪些塊進行優化。共有三個值 all、initial、async。

• initial: 對於異步導入的文件不處理
  
• async: 只對異步導入的文件處理
  
• all: 全部chunk， 只要導入的文件都做處理

splitChunks 可以和 DLLPlugins 可以並存, 但是需要在生產環境中。 開發環境的話,通過DLLPlugin提前打包的外部庫。
會被引用到入口文件中。

參考文章:webpack4入門5——插件

待更新

Webpack學習筆記九 webpack優化總結