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插件外，还可以使用其他优化技术来提高应用程序的性能。