關於DllPlugin的一些理解

時間 2019-12-10

標籤關於 dllplugin 一些理解简体版

原文原文鏈接

以一個vue全家桶爲例css

entry: {
    vendor: [
    'vue/dist/vue.esm.js',
    'vue-router',
    'vuex'
    ]
  }

圖1爲在生產環境中未使用DllPlugin生成的chunk.js文件html

圖2爲在生產環境中使用DllPlugin生成的.dll.js文件vue

圖3爲在開發環境中未使用DllPlugin生成的.esm運行時文件react

能夠看到，三個文件中都有isUnknownElement這個方法，這說明使用DllPlugin生成的.dll.js文件的內容既爲.esm運行時文件的內容（另外這裏的.esm運行時文件至關於一個polyfill,內置了一些方法，用於解析webpack編譯vue後生成的.js、.css等文件）jquery

在生產環境下，當不使用DllPlugin時，每次編譯都會把.esm運行時文件編譯到chunk.js中。使用DllPlugin後，只要在index.html中主入口文件前加載這個dll.js文件，就能拿到esm運行時文件的內容，省去了每次編譯vue全家桶的時間webpack

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>dll-test</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./static/js/vendor.dll.js"></script>
    <script src="./main.js"></script>
  </body>
</html>

使用場景：
1.對於像vue,react全家桶這樣組合，推薦使用DllPlugin。由於這些框架廣泛比較大，並且常常須要組合在一塊兒使用。使用DllPlugin在時間上會有比較不錯的收益web

2.對於lodash、jquery這樣的第三方庫，不推薦使用DllPlugin。jquery推薦使用expose-loader+ProvidePlugin。lodash-es按功能模塊導入，並配置babel-plugin-lodash、lodash-webpack-plugin選項能夠實現Tree Shakingvue-router

Dll文件裏只適合放置不常改動的代碼，好比說第三方庫（誰也不會有事無事就升級一下第三方庫吧），尤爲是自己就龐大或者依賴衆多的庫。

對於代碼優化。DllPlugin&DllReferencePlugin更適合react和vue這樣的框架的套餐系列。框架不能像jquery能夠經過expose-loader+providePlugin實現cdn加載。由於框架內套餐個數多，若是使用expose-loader+providePlugin方案，那麼每次providePlugin聲明和externals引入腳本的個數很是多，浪費HTTP請求。也不能經過CommonsChunkPlugin提取公共代碼，由於套餐打包後的大小太大。若是參與打包，將會很是緩慢。

DllPlugin&DllReferencePlugin這一方案，實際上也是屬於公共代碼提取的範疇，但與CommonsChunkPlugin不同的是，它不單單是把公用代碼提取出來放到一個獨立的文件供不一樣的頁面來使用，它更重要的一點是：把公用代碼和它的使用者（業務代碼）從編譯這一步就分離出來

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。