Webpack打包優化-外部擴展externals的實際應用

Webpack打包優化-外部擴展externals的實際應用

拆分文件

我們在使用js庫如vue或者react等的時候，webpack會將他們一起打包，react和react-dom文件就好幾百k，全部打包成一個文件，可想而知，這個文件會很大，用戶在首次打開時往往會出現白屏等待時間過長的問題，這時，我們就需要將這類文件抽離出來。

externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }

webpack中的externals配置提供了[不從bundle中引用依賴]的方式。解決的是，所創建的bundle依賴於那些存在於用戶環境中的依賴。
externals：

string，regex，function，array，object

爲了防止將某些import包（package）打包到bundle中，而是在運行時（runtime）再去外部獲取這些擴展包，例如：從CDN中引入jQuery，而不是把它打包

<script src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous"></script>

webpack可以不處理應用的某些依賴庫，使用externals配置後，依舊可以在代碼中通過CMD，AMD或者window/global全局的方式訪問。官方文檔
如遇到以下兩種情況

1. 想引入一些全局變量，但是不想被加載處理，可以在webpack.config.js使用externals模塊
2. 希望通過script引入庫，如用CDN的方式引入jquery，我們在使用時，依舊用require的方式來使用，但是卻不希望webpack將它編譯進文件中。

例如：

const base = 'Hello World';
module.exports = {
     entry: './main.js',
     output: {
         filename: 'bundle.js'
     },
     externals: {
     'base':  base
     }
}

現在，可以require base作爲模塊化引入進來使用，但是實際上是一個全局變量

const base = require('base');

externals支持以下模塊上下文（module context）

• global - 外部library能夠作爲全局變量使用。用戶可以通過在script標籤中引入來實現。這是externals的默認設置。
• commonjs - 用戶應用程序可能使用CommonJS模塊系統，因此外部library應該使用CommonJS模塊系統，並且應該是一個CommonJS模塊。
• commonjs2 - 類似上面幾行，但導出的是CommonJS模塊
• amd - 類似上面幾行，但使用AMD模塊系統

externals 接受各種語法，並且按照不同方式去解釋他們。

string

externals 中的 jQuery，表示你的 bundle 需要訪問全局形式的 jQuery 變量。
array

externals: {
  subtract: ['./math', 'subtract']
}

subtract: [’./math’, ‘subtract’] 轉換爲父子結構，其中 ./math 是父模塊，而 bundle 只引用
subtract 變量下的子集。
object

externals : {
  react: 'react'
}

// 或者

externals : {
  lodash : {
    commonjs: "lodash",
    amd: "lodash",
    root: "_" // indicates global variable
  }
}

此語法用於描述所有外部 library 可用的訪問方式。這裏 lodash 這個外部 library 可以在 AMD 和 CommonJS
模塊系統中通過 lodash 訪問，但在全局變量形式下用 _ 訪問。

function

externals: [
  function(context, request, callback) {
    if (/^yourregex$/.test(request)){
      return callback(null, 'commonjs ' + request);
    }
    callback();
  }
],

regex