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

elva 發布于2019-08-20 14:43 / 2765人閱讀

摘要：瀏覽器需要重新下載打包后的文件，即使文件的絕大部分都沒有變化。分離并且以來命名新的入口能夠緩和當前的問題。現在運行綁定的檢查結果是只是被綁定到這個綁定文件中。

分離庫代碼Code Splitting - Libraries

這個在webpack2.x中文網已存在，點擊這里

讓我們想一個簡單的應用——momentjs，他是一個事件格式化的庫。
安裝moment.

npm install --save moment

index文件將調用moment作為依賴來記錄現在時間。

index.js

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

我們可以用下面的配置來打包應用。

webpack.config.js

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

在你的應用中運行webpack，然后檢查打包的結果，你會發現moment和index.js被打包合并到bundle.js中了。

對于應用來說這不是我們想要的。如果index.js代碼放生了變化，整個bundle.js需要重新打包一遍。瀏覽器需要重新下載打包后的文件，即使文件的絕大部分都沒有變化。

mutilple Entries 多個文件入口。

分離moment并且以vendor來命名新的入口能夠緩和當前的問題。

webpack.config.js webpack配置

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

運行webpack，你會發現兩個被打包的文件被輸出。如果你檢查的話會發現，moment在這兩個文件中都存在。

CommonsChunkPlugin

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

我們可如下修改配置文件來使用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.
            })
        ]
    }
}

現在運行webpack,綁定的檢查結果是moment只是被綁定到vendor這個綁定文件中。

Manifest file（證明文件）

應該注意到，如果我們改變應用的代碼，然后運行webapck，將會發現vendor綁定文件的也發生了變化。
即使vendor和main兩個綁定的問價是分開執行綁定的，一個變化另一個沒有變化會導致兩個文件的hash
都發生變化。這說明我們還是沒有獲得瀏覽器緩存文件的好處，因為文件的hash導致名字都發生了變化。因此他們都會重新下載。

這種問題會出現每次buil的時候。webpack生成一些webpack運行碼，它幫助webpack做它的事。當只有一個
bundle綁定文件時，運行碼在他的內部。但是有多個bundle被生成時，他在common build中，也就是vendor文件中。

為了解決這個問題，我們需要摘出來一個文件專門存放運行碼，這個文件是mainifest file。通過每次創建一個其他的文件--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.
            })
        ]
    }
};

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

云服務器 GPU云服務器中文翻譯 webrtc中文翻譯源碼中文說明之翻譯代碼

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

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

webpack2.x 代碼分離文檔翻譯

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

Scott 2019-08-21 15:18 評論0 收藏0
代碼分離-import() webpack2.x 中文文檔翻譯

摘要：代碼分離使用中文文檔地址點擊這里動態導入目前，類函模塊加載的語法建議整體交給。在中的是個分離點，用來把被請求的模塊獨立成一個單獨的模塊。被替代因為在中使用已經不合建議規范，因此將在版本中啟用。代碼分離-使用import() 中文文檔地址點擊這里動態導入目前，類函模import()塊加載的語法建議——syntax proposal整體交給ECMAScript。ES2015(es6)...

jaysun 2019-08-20 15:18 評論0 收藏0
webpack2.x 中文文檔翻譯之依賴管理 Dependency Management

摘要：依賴管理該條已在中文網存在，點擊這里表達式來調用當你的請求包含表達式，那個一個上下文環境將被創建。一個包含所有父文件夾和子及后代文件夾中以結尾的文件的上下文。一個函數，返回一個數組，包含上下文模塊能夠處理的所有的請求。依賴管理 Dependency Management 該條已在webpack2.x中文網存在，點擊這里 es6 modules commonjs amd 表達式...

raledong 2019-08-20 14:42 評論0 收藏0
webpack2.x 中文文檔翻譯之公開路徑(pbulic path)

摘要：公開路徑該條已在中文網存在點擊這里有一個非常有用的設置，允許你設置一個所有資源的基礎路徑在你的應用中。使用案例這里有有些實際應用中的案例，其中它使用的非常靈活。公開路徑(pbulic path) 該條已在webpack2.x中文網存在,點擊這里 webpack有一個非常有用的設置，允許你設置一個所有資源的基礎路徑在你的應用中。它叫做publicPath。使用案例(Use cases...

W4n9Hu1 2019-08-20 14:43 評論0 收藏0
webpack2.x 中文文檔翻譯之出口Output

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

weizx 2019-08-20 14:42 評論0 收藏0