webpack + vue 使用 DllPlugin 和 DllReferencePlugin 进行性能优化？

前端开发中随着项目规模的不断扩大，打包构建的时间越来越长，这时候需要使用一些工具来进行优化。其中之一就是 webpack 中的 DllPlugin 和 DllReferencePlugin。这两个插件能够大大减少打包构建的时间，提高了开发效率。本文将说明 webpack 和 vue 如何使用 DllPlugin 和 DllReferencePlugin 进行性能优化。

DllPlugin 和 DllReferencePlugin 是什么？

DllPlugin 和 DllReferencePlugin 是 webpack 中的两个插件。它们用于将一些常用的、不常变化的模块提前打包出来，形成一个独立的动态链接库（Dynamic-link Library，DLL）。这样，在每次打包构建时，webpack 只需要对每个模块进行一次编译，而不用对所有模块进行编译，从而大大减少了打包构建的时间。

具体地说，DllPlugin 用于打包生成一个 DLL 文件，该文件包含了一些常用但不常变化的模块，比如 vue、react、jquery 等。DllReferencePlugin 则用于在 webpack.config.js 中引入该 DLL 文件。

如何利用 DllPlugin 和 DllReferencePlugin 进行性能优化？

1. 配置 webpack.config.dll.js

首先，需要创建一个 webpack.config.dll.js 的配置文件，用于打包生成 DLL 文件。在该文件中，需要对 entry、output、plugins 进行配置。

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['vue', 'vue-router', 'vuex']
  },
  output: {
    path: path.join(__dirname, '../public'),
    filename: '[name].dll.js',
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.join(__dirname, '../public', '[name].json')
    })
  ]
};

上述代码中，entry 中配置了所需要打包的模块，这里以 vue、vue-router、vuex 为例。output 中配置了 DLL 文件的输出路径和文件名，这里输出到 public 目录下。plugins 中配置了 DllPlugin 插件，其中的 name 属性和 output 中的 library 属性必须相同， path 属性则是配置生成的 manifest 文件的输出路径和文件名。

2. 运行 webpack.config.dll.js

在项目根目录下运行以下命令，生成 DLL 文件和 manifest.json 文件。

$ webpack --config webpack.config.dll.js

执行完该命令后，会在 public 目录下生成 vendor.dll.js 和 vendor.json 两个文件。

3. 引入 DLL 文件

在 webpack.config.js 文件中引入 vendor.dll.js 文件，并使用 DllReferencePlugin 插件进行配置。这个步骤需要在一开始的 plugins 中添加一个 new webpack.DllReferencePlugin({...}) 对象。

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('../public/vendor.json')
    })
  ]
};

其中 context 属性需要和 manifest 文件中的 directory 属性相同。此时，webpack 只会编译 entry 中的 app 模块，不会对 vendor 模块进行编译。webpack 在打包构建时，会将 vendor 模块从 DLL 文件中引入到 app 模块中一起打包。这样，build 的时候就可以从旧的代码构建出新的代码。

总结

DllPlugin 和 DllReferencePlugin 可以大大提高 webpack 的打包效率，减少构建时间。在使用前需要配置 webpack.config.dll.js 文件，将需要打包的模块写入 entry 中，然后运行打包命令 $ webpack --config webpack.config.dll.js ，生成 DLL 文件和 manifest.json 文件。在 webpack.config.js 文件中引入 vendor.dll.js 文件，使用 DllReferencePlugin 插件进行配置。最后，重新运行打包命令 $ webpack 进行构建。

本文介绍了 webpack 和 vue 如何利用 DllPlugin 和 DllReferencePlugin 进行性能优化，分享了具体的代码和示例，希望能给大家带来帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6594f8d6eb4cecbf2d93de30