Webpack DllPlugin 和 DllReferencePlugin

thekingisalwaysluc 發布于2019-08-21 11:43 / 3102人閱讀

摘要：沒使用你會發現這個時候，和都非常的大，因為他們都了一個很大的包，而使用了，則將這個大包抽離出來成為一個。如果是在手機開發中，便可以將頻繁修改的文件和不頻繁修改的文件分離，這樣每次更新只需要替換部分的包。

Webpack DllPlugin 和 DllReferencePlugin 1.插件的作用

是一種分包的解決方案，它可以將部分代碼抽出來，多帶帶形成一個插件包，類似windows系統中的dll包.

2.插件的用途

因為插件的作用是分離代碼，所以常用在代碼中做公共代碼的抽離，例如React中可以把公共的模塊【react , react dom等等】

3.優勢

1.你可以從你的application 中分離出一個library，當你使用webpack 的w --watch模式，那么你修改除了library以外的文件，將會非常的快速。

2.當用戶修改代碼，只需要修改他們所改變的部分，這對于熱更新來說是件好事

3.可以將部分相同作用的包合并起來，方便維護開發

4.加載方式

使用dll：這個時候會多打一個library包，就是這里的Child vendor，他有738KB，
創建使用了1320ms

這里的主要文件則變的非常小，創建使用了237ms

當你修改了主要文件，那么你只需要重新編譯主要文件中你修改的部分,這樣會非常快，這里只使用15ms。

沒使用dll：

你會發現這個時候，pageA和pageB都非常的大，因為他們都require了一個很大的包，
而使用了dll，則將這個大包抽離出來成為一個。創建使用了1412ms

這里僅僅修改一點東西，卻發現要回重新編譯739kb的東西，這里僅僅是一個小文件，如果是一個大文件，那么將會非常的耗時，這里使用了62ms，那么如果文件很大的情況，將會非常影響build的速度。

上圖中，使用dll，那么他會將一些不需要頻繁修改的文件編譯成一個library包，那么所有使用到該library的文件大小都會大幅度的下降，之后修改文件后的編譯速度將會非常的快。
如果是在手機app開發中，便可以將頻繁修改的文件和不頻繁修改的文件分離，這樣每次更新只需要替換部分的包。

5.代碼實現

源碼地址

文件目錄

|-dist
|--dll
|---生成文件的位置
|-pageA.js
|-pageB.js
|-pageC.js
|-vendor.js
|-vendor2.js
|-webpack.config.dll.js
|-package.json

/* eslint import/no-extraneous-dependencies: ["off"] */
const path = require("path");
const webpack = require("webpack");

// 文件的輸出目錄
const STATIC_SRC = "dist";
// 文件輸出的文件夾
const OUTPUT_PATH = "dll";
// 控制是否開啟分離模式


const main = [
  {
    name: "vendor",
    // 這里是需要打包成library包的文件入口
    entry: [
      "./vendor.js", "./vendor2.js", "react", "react-dom"
    ],
    // 打包后的輸出位置和輸出名字
    output: {
      path: path.resolve(__dirname, STATIC_SRC, OUTPUT_PATH),
      filename: "vendor.js",
      library: "vendor_[hash]"
    },
    plugins: [new webpack.DllPlugin({
      name: "vendor_[hash]",
      //這里的文件輸出文件需要和DllReferencePlugin保持一致
      path: path.resolve(__dirname, STATIC_SRC, OUTPUT_PATH, "manifest.json")
    })],
  },
  {
    name: "app",
    dependencies: ["vendor"],
    entry: {
      pageA: "./pageA",
      pageB: "./pageB",
      pageC: "./pageC"
    },
    output: {
      path: path.resolve(__dirname, STATIC_SRC, OUTPUT_PATH),
      filename: "[name].js"
    },
    plugins:  [ new webpack.DllReferencePlugin({
      // 這里需要保證路徑與DllPlugin中生成的manifest路徑一致，否則報錯
      manifest: path.resolve(__dirname, STATIC_SRC, OUTPUT_PATH, "manifest.json")
    })]
  }
];
module.exports = main;

參考

Optimizing Webpack build times and improving caching with DLL bundles

webpack 官方文檔

云服務器 GPU云服務器 DllReferencePlugin DllPlugin webpack _webpack

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87025.html

webpack的DllPlugin和DllReferencePlugin插件的簡單使用總結

摘要：今天就來簡單講講它們的使用。這個插件的作用是創建文件和文件。使用其他的腳手架需要根據具體情況考慮。不要使用，否則在運行時會報錯誤。的和的要保持一致。這段時間在對公司的打包構建速度和app.js文件大小進行優化。使用到了webpack的DllPlugin和DllReferencePlugin。今天就來簡單講講它們的使用。其實對于這兩個插件網上已經有很多各種各樣的文章了。不過筆者認為，...

wushuiyong 2019-08-22 18:31 評論0 收藏0
Webpack DllPlugin 和 DllReferencePlugin

摘要：沒使用你會發現這個時候，和都非常的大，因為他們都了一個很大的包，而使用了，則將這個大包抽離出來成為一個。如果是在手機開發中，便可以將頻繁修改的文件和不頻繁修改的文件分離，這樣每次更新只需要替換部分的包。 Webpack DllPlugin 和 DllReferencePlugin 1.插件的作用是一種分包的解決方案，它可以將部分代碼抽出來，單獨形成一個插件包，類似windows系統中...

buildupchao 2019-08-01 16:59 評論0 收藏0
webpack多頁應用架構系列（十一）：預打包Dll，實現webpack音速編譯

摘要：本文首發于的技術博客實用至上，非經作者同意，請勿轉載。原文地址如果您對本系列文章感興趣，歡迎關注訂閱這里前言書承上文多頁應用架構系列十如何打造一個自定義的。終于，發現了這一大殺器，打包時間過長的問題得到完美解決。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/119000000710437...

sixleaves 2019-08-20 11:33 評論0 收藏0
webpack使用-詳解DllPlugin

摘要：前言時光飛逝，轉眼又偷懶了一個多月什么是文件為動態鏈接庫文件在中，許多應用程序并不是一個完整的可執行文件，它們被分割成一些相對獨立的動態鏈接庫，即文件，放置于系統中。前言（時光飛逝，轉眼又偷懶了一個多月）什么是DLL DLL(Dynamic Link Library)文件為動態鏈接庫文件,在Windows中，許多應用程序并不是一個完整的可執行文件，它們被分割成一些相對獨立的動態鏈...

KunMinX 2019-08-23 12:12 評論0 收藏0
webpack開發環境配置

摘要：本次的重點主要集中在開發環境上，生產環境則是使用的默認模式。開發環境開發環境沒什么好說的了，簡單易配置，官網很詳細。日常吐槽經過不斷的調整和測試，關于 react 的 webpack 配置終于新鮮出爐。本次的重點主要集中在開發環境上，生產環境則是使用 webpack 的 production 默認模式。本次配置主要有： eslint+prettier; optimizati...

FuisonDesign 2019-08-23 18:14 評論0 收藏0