亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

webpack2.x 中文文檔 翻譯 之 分離庫(kù)代碼Code Splitting - Librari

elva / 2836人閱讀

摘要：瀏覽器需要重新下載打包后的文件，即使文件的絕大部分都沒(méi)有變化。分離并且以來(lái)命名新的入口能夠緩和當(dāng)前的問(wèn)題?，F(xiàn)在運(yùn)行綁定的檢查結(jié)果是只是被綁定到這個(gè)綁定文件中。

分離庫(kù)代碼Code Splitting - Libraries

這個(gè)在webpack2.x中文網(wǎng)已存在，點(diǎn)擊這里

讓我們想一個(gè)簡(jiǎn)單的應(yīng)用——momentjs，他是一個(gè)事件格式化的庫(kù)。
安裝moment.

npm install --save moment

index文件將調(diào)用moment作為依賴(lài)來(lái)記錄現(xiàn)在時(shí)間。

index.js 
var moment = require("moment");
console.log(moment().format());

我們可以用下面的配置來(lái)打包應(yīng)用。

webpack.config.js 
module.exports = function(env) {
    return {
        entry: "./index.js",
        output: {
            filename: "[chunkhash].[name].js`,
            path: "./dist"
        }
    }
}

在你的應(yīng)用中運(yùn)行webpack，然后檢查打包的結(jié)果，你會(huì)發(fā)現(xiàn)moment和index.js被打包合并到bundle.js中了。

對(duì)于應(yīng)用來(lái)說(shuō)這不是我們想要的。如果index.js代碼放生了變化，整個(gè)bundle.js需要重新打包一遍。瀏覽器需要重新下載打包后的文件，即使文件的絕大部分都沒(méi)有變化。

mutilple Entries 多個(gè)文件入口。

分離moment并且以vendor來(lái)命名新的入口能夠緩和當(dāng)前的問(wèn)題。

webpack.config.js webpack配置 
module.exports = function(env) {
    return {
        entry: {
            main: "./index.js",
            vendor: "moment"
        },
        output: {
            filename: "[chunkhash].[name].js`,
            path: "./dist"
        }
    }
}

運(yùn)行webpack，你會(huì)發(fā)現(xiàn)兩個(gè)被打包的文件被輸出。如果你檢查的話會(huì)發(fā)現(xiàn)，moment在這兩個(gè)文件中都存在。

CommonsChunkPlugin

這是一個(gè)非常復(fù)雜的插件。他的重要功能從不同的bundle文件中摘除相同的模塊，然后綁定到一個(gè)bundle文件中。
如果一個(gè)公共bundle文件不存在，那么就會(huì)創(chuàng)建一個(gè)。

我們可如下修改配置文件來(lái)使用CommonsChunkPlugin插件。

var webpack = require("webpack");
module.exports = function(env) {
    return {
        entry: {
            main: "./index.js",
            vendor: "moment"
        },v
        output: {
            filename: "[chunkhash].[name].js`,
            path: "./dist"
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: "vendor" // Specify the common bundle"s name.
            })
        ]
    }
}

現(xiàn)在運(yùn)行webpack,綁定的檢查結(jié)果是moment只是被綁定到vendor這個(gè)綁定文件中。

Manifest file（證明文件）

應(yīng)該注意到，如果我們改變應(yīng)用的代碼，然后運(yùn)行webapck，將會(huì)發(fā)現(xiàn)vendor綁定文件的也發(fā)生了變化。
即使vendor和main兩個(gè)綁定的問(wèn)價(jià)是分開(kāi)執(zhí)行綁定的，一個(gè)變化另一個(gè)沒(méi)有變化會(huì)導(dǎo)致兩個(gè)文件的hash
都發(fā)生變化。這說(shuō)明我們還是沒(méi)有獲得瀏覽器緩存文件的好處，因?yàn)槲募膆ash導(dǎo)致名字都發(fā)生了變化。因此他們都會(huì)重新下載。

這種問(wèn)題會(huì)出現(xiàn)每次buil的時(shí)候。webpack生成一些webpack運(yùn)行碼，它幫助webpack做它的事。當(dāng)只有一個(gè)
bundle綁定文件時(shí)，運(yùn)行碼在他的內(nèi)部。但是有多個(gè)bundle被生成時(shí)，他在common build中，也就是vendor文件中。

為了解決這個(gè)問(wèn)題，我們需要摘出來(lái)一個(gè)文件專(zhuān)門(mén)存放運(yùn)行碼，這個(gè)文件是mainifest file。通過(guò)每次創(chuàng)建一個(gè)其他的文件--manifest，在它的前面是一大堆我們需要緩存的文件，在vendor中。

webpack.config.js 
var webpack = require("webpack");
module.exports = function(env) {
    return {
        entry: {
            main: "./index.js",
            vendor: "moment"
        },
        output: {
            filename: "[chunkhash].[name].js`,
            path: "./dist"
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: ["vendor", "manifest"] // Specify the common bundle"s name.
            })
        ]
    }
};

通過(guò)上面的配置，我們可以看到三個(gè)bundle被生成，vendor,main以及manifestbundle。

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

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

相關(guān)文章

  • webpack2.x 代碼分離文檔 翻譯

    摘要：代碼分離代碼分離是最受矚目的功能。下面有兩種代碼分離的技術(shù)。使用實(shí)現(xiàn)代碼分離是使用的方式實(shí)現(xiàn)靜待資源異步調(diào)用。通過(guò)添加，我們可以在代碼中打一個(gè)分離點(diǎn)，可以以此建立一個(gè)獨(dú)立的包，包含這個(gè)點(diǎn)的所有代碼。 代碼分離(Code Splitting) 代碼分離是webpack最受矚目的功能。它允許你把你的代碼分成不同的部分分開(kāi)打包，然后實(shí)現(xiàn)在需要的時(shí)候再進(jìn)行加載（按需加載提高速度）————例如用...

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

  • 代碼分離-import() webpack2.x 中文文檔 翻譯

    摘要：代碼分離使用中文文檔地址點(diǎn)擊這里動(dòng)態(tài)導(dǎo)入目前，類(lèi)函模塊加載的語(yǔ)法建議整體交給。在中的是個(gè)分離點(diǎn)，用來(lái)把被請(qǐng)求的模塊獨(dú)立成一個(gè)單獨(dú)的模塊。被替代因?yàn)樵谥惺褂靡呀?jīng)不合建議規(guī)范，因此將在版本中啟用。 代碼分離-使用import() 中文文檔地址點(diǎn)擊這里 動(dòng)態(tài)導(dǎo)入 目前，類(lèi)函模import()塊加載的語(yǔ)法建議——syntax proposal整體交給ECMAScript。ES2015(es6)...

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

  • webpack2.x 中文文檔 翻譯 之 依賴(lài)管理 Dependency Management

    摘要：依賴(lài)管理該條已在中文網(wǎng)存在，點(diǎn)擊這里表達(dá)式來(lái)調(diào)用當(dāng)你的請(qǐng)求包含表達(dá)式，那個(gè)一個(gè)上下文環(huán)境將被創(chuàng)建。一個(gè)包含所有父文件夾和子及后代文件夾中以結(jié)尾的文件的上下文。一個(gè)函數(shù)，返回一個(gè)數(shù)組，包含上下文模塊能夠處理的所有的請(qǐng)求。 依賴(lài)管理 Dependency Management 該條已在webpack2.x中文網(wǎng)存在，點(diǎn)擊這里 es6 modules commonjs amd 表達(dá)式...

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

  • webpack2.x 中文文檔 翻譯 之 公開(kāi)路徑(pbulic path)

    摘要：公開(kāi)路徑該條已在中文網(wǎng)存在點(diǎn)擊這里有一個(gè)非常有用的設(shè)置，允許你設(shè)置一個(gè)所有資源的基礎(chǔ)路徑在你的應(yīng)用中。使用案例這里有有些實(shí)際應(yīng)用中的案例，其中它使用的非常靈活。 公開(kāi)路徑(pbulic path) 該條已在webpack2.x中文網(wǎng)存在,點(diǎn)擊這里 webpack有一個(gè)非常有用的設(shè)置，允許你設(shè)置一個(gè)所有資源的基礎(chǔ)路徑在你的應(yīng)用中。它叫做publicPath。 使用案例(Use cases...

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

  • webpack2.x 中文文檔 翻譯 之 出口Output

    摘要：出口影響編譯的輸出告訴怎樣編譯輸出的文件允許多個(gè)入口一個(gè)出口的情況。該選項(xiàng)實(shí)現(xiàn)跨域加載模塊可以的值是命名每個(gè)出口文件。不必明確絕對(duì)路徑。使用設(shè)置項(xiàng)，設(shè)置具體位置。僅僅命名文件名字即可。 出口Output 影響編譯的輸出告訴webpack怎樣編譯輸出的文件允許多個(gè)入口一個(gè)出口的情況。 用法 const config = { output: bundle.js }; module.e...

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

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

0條評(píng)論

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