成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Webpack DllPlugin 和 DllReferencePlugin

thekingisalwaysluc / 3110人閱讀

摘要：沒(méi)使用你會(huì)發(fā)現(xiàn)這個(gè)時(shí)候，和都非常的大，因?yàn)樗麄兌剂艘粋€(gè)很大的包，而使用了，則將這個(gè)大包抽離出來(lái)成為一個(gè)。如果是在手機(jī)開(kāi)發(fā)中，便可以將頻繁修改的文件和不頻繁修改的文件分離，這樣每次更新只需要替換部分的包。

Webpack DllPlugin 和 DllReferencePlugin 1.插件的作用
是一種分包的解決方案，它可以將部分代碼抽出來(lái)，多帶帶形成一個(gè)插件包，類似windows系統(tǒng)中的dll包.
2.插件的用途
因?yàn)椴寮淖饔檬欠蛛x代碼，所以常用在代碼中做公共代碼的抽離，例如React中可以把公共的模塊【react , react dom等等】
3.優(yōu)勢(shì)
1.你可以從你的application 中分離出一個(gè)library，當(dāng)你使用webpack 的w --watch模式，那么你修改除了library以外的文件，將會(huì)非常的快速。
2.當(dāng)用戶修改代碼，只需要修改他們所改變的部分，這對(duì)于熱更新來(lái)說(shuō)是件好事
3.可以將部分相同作用的包合并起來(lái)，方便維護(hù)開(kāi)發(fā)
4.加載方式

使用dll：這個(gè)時(shí)候會(huì)多打一個(gè)library包，就是這里的Child vendor，他有738KB，
創(chuàng)建使用了1320ms

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

當(dāng)你修改了主要文件，那么你只需要重新編譯主要文件中你修改的部分,這樣會(huì)非?？?，這里只使用15ms。

沒(méi)使用dll：

你會(huì)發(fā)現(xiàn)這個(gè)時(shí)候，pageA和pageB都非常的大，因?yàn)樗麄兌紃equire了一個(gè)很大的包，
而使用了dll，則將這個(gè)大包抽離出來(lái)成為一個(gè)。創(chuàng)建使用了1412ms

這里僅僅修改一點(diǎn)東西，卻發(fā)現(xiàn)要回重新編譯739kb的東西，這里僅僅是一個(gè)小文件，如果是一個(gè)大文件，那么將會(huì)非常的耗時(shí)，這里使用了62ms，那么如果文件很大的情況，將會(huì)非常影響build的速度。

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

5.代碼實(shí)現(xiàn)

源碼地址

文件目錄

|-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";
// 控制是否開(kāi)啟分離模式


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路徑一致，否則報(bào)錯(cuò)
      manifest: path.resolve(__dirname, STATIC_SRC, OUTPUT_PATH, "manifest.json")
    })]
  }
];
module.exports = main;
參考

Optimizing Webpack build times and improving caching with DLL bundles

webpack 官方文檔

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87025.html

相關(guān)文章

  • webpack的DllPlugin和DllReferencePlugin插件的簡(jiǎn)單使用總結(jié)

    摘要：今天就來(lái)簡(jiǎn)單講講它們的使用。這個(gè)插件的作用是創(chuàng)建文件和文件。使用其他的腳手架需要根據(jù)具體情況考慮。不要使用，否則在運(yùn)行時(shí)會(huì)報(bào)錯(cuò)誤。的和的要保持一致。 這段時(shí)間在對(duì)公司的打包構(gòu)建速度和app.js文件大小進(jìn)行優(yōu)化。使用到了webpack的DllPlugin和DllReferencePlugin。今天就來(lái)簡(jiǎn)單講講它們的使用。 其實(shí)對(duì)于這兩個(gè)插件網(wǎng)上已經(jīng)有很多各種各樣的文章了。不過(guò)筆者認(rèn)為，...

    wushuiyong 評(píng)論0 收藏0

  • Webpack DllPlugin 和 DllReferencePlugin

    摘要：沒(méi)使用你會(huì)發(fā)現(xiàn)這個(gè)時(shí)候，和都非常的大，因?yàn)樗麄兌剂艘粋€(gè)很大的包，而使用了，則將這個(gè)大包抽離出來(lái)成為一個(gè)。如果是在手機(jī)開(kāi)發(fā)中，便可以將頻繁修改的文件和不頻繁修改的文件分離，這樣每次更新只需要替換部分的包。 Webpack DllPlugin 和 DllReferencePlugin 1.插件的作用 是一種分包的解決方案，它可以將部分代碼抽出來(lái)，單獨(dú)形成一個(gè)插件包，類似windows系統(tǒng)中...

    buildupchao 評(píng)論0 收藏0

  • webpack多頁(yè)應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實(shí)現(xiàn)webpack音速編譯

    摘要：本文首發(fā)于的技術(shù)博客實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里前言書(shū)承上文多頁(yè)應(yīng)用架構(gòu)系列十如何打造一個(gè)自定義的。終于，發(fā)現(xiàn)了這一大殺器，打包時(shí)間過(guò)長(zhǎng)的問(wèn)題得到完美解決。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000710437...

    sixleaves 評(píng)論0 收藏0

  • webpack使用-詳解DllPlugin

    摘要：前言時(shí)光飛逝，轉(zhuǎn)眼又偷懶了一個(gè)多月什么是文件為動(dòng)態(tài)鏈接庫(kù)文件在中，許多應(yīng)用程序并不是一個(gè)完整的可執(zhí)行文件，它們被分割成一些相對(duì)獨(dú)立的動(dòng)態(tài)鏈接庫(kù)，即文件，放置于系統(tǒng)中。 前言 （時(shí)光飛逝，轉(zhuǎn)眼又偷懶了一個(gè)多月） 什么是DLL DLL(Dynamic Link Library)文件為動(dòng)態(tài)鏈接庫(kù)文件,在Windows中，許多應(yīng)用程序并不是一個(gè)完整的可執(zhí)行文件，它們被分割成一些相對(duì)獨(dú)立的動(dòng)態(tài)鏈...

    KunMinX 評(píng)論0 收藏0

  • webpack開(kāi)發(fā)環(huán)境配置

    摘要：本次的重點(diǎn)主要集中在開(kāi)發(fā)環(huán)境上，生產(chǎn)環(huán)境則是使用的默認(rèn)模式。開(kāi)發(fā)環(huán)境開(kāi)發(fā)環(huán)境沒(méi)什么好說(shuō)的了，簡(jiǎn)單易配置，官網(wǎng)很詳細(xì)。 日常吐槽 經(jīng)過(guò)不斷的調(diào)整和測(cè)試，關(guān)于 react 的 webpack 配置終于新鮮出爐。本次的重點(diǎn)主要集中在開(kāi)發(fā)環(huán)境上，生產(chǎn)環(huán)境則是使用 webpack 的 production 默認(rèn)模式。 本次配置主要有： eslint+prettier; optimizati...

    FuisonDesign 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<