webpack vendor詳解

一、入門介紹

Webpack是一個模塊化的打包工具，可以將JavaScript的模塊化打包成單個文件。Webpack是面向現代JavaScript應用程序的最佳選擇之一，並且它有許多插件可以擴展它的功能，其中之一就是Webpack-Vendor插件。

Webpack-Vendor插件用於將第三方庫和依賴項打包成單獨的文件（通常命名為vendor.js），從而加快應用程序的載入速度。例如，假設您的應用程序依賴於React和Lodash庫。在使用Webpack-Vendor插件後，React和Lodash將被打包到vendor.js文件中，從而使這兩個庫在應用程序載入時更快地載入。

要使用Webpack-Vendor插件，您需要安裝它並將其配置為Webpack的插件。下面是一個簡單的配置示例：

const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module) {
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            minChunks: Infinity
        })
    ]
};

二、代碼分割

Webpack-Vendor插件可以與Webpack的代碼分割功能結合使用，從而進一步提高應用程序的載入速度。代碼分割是一種將代碼拆分成更小的塊的技術，從而使應用程序可以更快地載入和運行。

在Webpack中，您可以使用import()函數動態導入代碼，從而實現代碼分割。例如，假設您有一個模塊a.js，其中有一個依賴項b.js。在使用Webpack-Vendor插件之前，a.js和b.js將被打包成單個文件，從而導致應用程序載入速度慢。但是，如果您使用import()函數動態導入b.js，Webpack會將b.js打包到自己的文件中，並在需要時非同步載入它。

下面是模塊a.js的示例代碼：

import(/* webpackChunkName: "b" */ './b').then(b => {
    console.log(b);
});

上面的代碼將b.js打包到單獨的文件中，並在需要時非同步載入它。

三、模塊標識符

在Webpack中，每個模塊都有一個標識符（通常是數字）。這些標識符是由Webpack生成的，並用於確定哪些模塊被共享和哪些模塊是唯一的。

當使用Webpack-Vendor插件打包應用程序時，您可能會發現vendor.js文件的標識符已經改變了。這是因為Vendor插件將第三方庫和依賴項打包成單獨的文件，其中包括它們自己的模塊標識符。這可能會導致一些問題，例如，在更新第三方庫時，它們的模塊標識符可能會改變，從而導致Webpack重新打包應用程序。

為了解決這個問題，您可以使用NamedModulesPlugin插件。該插件將由Webpack生成模塊的標識符替換為模塊的路徑。這可以確保模塊的標識符始終是固定的，並且在應用程序更新時不會發生變化。

const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module) {
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            minChunks: Infinity
        }),
        new webpack.NamedModulesPlugin()
    ]
};

四、優化

除了Webpack-Vendor插件之外，還可以使用其他優化技術來加速應用程序的載入速度。以下是一些優化技術的簡要說明：

1. 壓縮代碼：通過壓縮JavaScript和CSS文件來減少文件大小，從而加快應用程序載入速度。Webpack可以使用UglifyJSPlugin和OptimizeCSSAssetsPlugin等插件來壓縮代碼。

2. 使用CDN：使用CDN（內容分發網路）可以將靜態資產（例如JavaScript和CSS文件）分發到全球的伺服器上，從而加快它們的下載速度。Webpack可以使用publicPath選項設置CDN的URL。

3. 緩存：使用長期緩存策略可以讓用戶只需下載更新的文件，而不是所有文件。Webpack可以使用[hash]或[chunkhash]佔位符為文件名添加哈希，以便在更新時更改文件名。

五、總結

Webpack-Vendor插件是Webpack的一個插件，用於將第三方庫和依賴項打包成單獨的文件，以加快應用程序的載入速度。您可以使用Webpack的代碼分割功能進一步加速載入速度，並使用NamedModulesPlugin插件固定模塊標識符。除了Webpack-Vendor插件外，還可以使用其他優化技術來提高應用程序的性能。