Webpack 分离 Vendor 代码的方法和意义

背景

在前端开发中，我们经常会使用一些第三方库来辅助我们完成项目的构建和实现，例如 jQuery、Bootstrap、React 等。这些库通常都是相对稳定的，不需要频繁修改，因此我们可以将它们单独打包成一个 Vendor 文件，并缓存起来，以提高页面加载速度。

Webpack 是一个流行的前端构建工具，它可以帮助我们完成代码的打包和优化。在使用 Webpack 进行项目构建时，我们可以通过一些配置来实现 Vendor 文件的分离。

方法

第一步：安装插件

在使用 Webpack 进行项目构建时，我们可以使用 CommonsChunkPlugin 插件来将 Vendor 文件分离出来。首先，我们需要通过 npm 安装该插件：

npm install --save-dev webpack

第二步：配置 Webpack

接下来，我们需要在 Webpack 的配置文件中添加以下代码：

// www.javascriptcn.com code example
const webpack = require('webpack');

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: ['jquery', 'bootstrap']
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    })
  ]
};

在上面的代码中，我们首先指定了入口文件 index.js，同时将需要分离的第三方库（这里是 jQuery 和 Bootstrap）设置为一个单独的 entry。然后，我们将 Vendor 文件的名称指定为 vendor.js，并将其输出到 dist 目录中。

最后，我们在插件中使用 CommonsChunkPlugin 来将 Vendor 文件单独打包。

第三步：运行 Webpack

完成上述配置后，我们可以通过运行以下命令来启动 Webpack：

webpack

Webpack 将会根据我们的配置文件进行构建，并将 Vendor 文件单独打包。

意义

将 Vendor 文件单独打包的主要意义在于提高页面加载速度。由于第三方库通常都是相对稳定的，我们可以将其单独打包并缓存起来，以减少每次页面加载时需要下载的资源数量。

另外，将 Vendor 文件单独打包还可以提高代码的可维护性。由于第三方库通常不需要频繁修改，我们可以将其与业务代码分离，以便于代码的维护和升级。

示例代码

以下是一个简单的示例代码，演示了如何将 jQuery 和 Bootstrap 单独打包成一个 Vendor 文件：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack Vendor Demo</title>
  </head>
  <body>
    <div class="container">
      <h1>Hello, world!</h1>
    </div>
    <script src="vendor.js"></script>
    <script src="main.js"></script>
  </body>
</html>

import $ from 'jquery';
import 'bootstrap';

$(function() {
  console.log('Hello, world!');
});

// www.javascriptcn.com code example
const webpack = require('webpack');

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: ['jquery', 'bootstrap']
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    })
  ]
};

在上面的示例代码中，我们首先在 HTML 文件中引入了 Vendor 文件和业务代码文件。然后，在业务代码文件中引入了 jQuery 和 Bootstrap。

最后，我们在 Webpack 的配置文件中将 jQuery 和 Bootstrap 设置为一个单独的 entry，并使用 CommonsChunkPlugin 插件将其打包成一个 Vendor 文件。在运行 Webpack 后，我们可以在 dist 目录中看到生成的 vendor.js 和 main.js 文件。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d38661a941bf71346b6870