First taste of Vue3, optimized packaging through DllPlugin and DllReferencePlugin

Preface

I recently tried vue3.0 and built a small demo, thinking about development packaging and building generalization and packaging compilation efficiency, today I will record how to improve webpack build after more and more requirements and components are written. The speed and the dll file extraction configuration for the project built for the current vue-cli3.x.

What are DLLPLUGIN and DLLREFERENCEPLUGIN

When using webpack for packaging, for dependent third-party libraries, such as vue, vuex, etc., which will not be modified, we can package it separately from our own code. The advantage of this is that we change my local code every time Webpack only needs to package the file code of my project itself, instead of compiling the third-party library, then the third-party library is only packaged once when it is first packaged. In the future, as long as we do not upgrade the third-party package At that time, then webpack will not package these libraries, which can quickly increase the speed of packaging. So in order to solve this problem, DllPlugin and DllReferencePlugin plug-ins were produced.

So for the current webpack community, if we want to separate the code written by ourselves, the webpack community provides two solutions:

1. CommonsChunkPlugin
2. DLLPlugin

The CommonsChunkPlugin  plug-in will still process some third-party dependent libraries every time it is packaged, but it can separate the third-party library files from our code and generate a separate js file. But it still cannot improve the speed of packaging. In the vue.config configuration file of vue3.x, we can find the optimization configuration from the official website. This configuration is very practical. The specific operation is not introduced here. You can view the optimization configuration on the official website.

DLLPlugin  can separate the third-party library code, and every time the file is changed, it will only package the code of the project itself. So the packaging speed will be faster.

The DLLPlugin  plug-in creates a dll-only bundle in an additional independent webpack setting, which means that we will create a webpack.dll.config.js file in addition to webpack.config.js in the project root directory. The function of webpack.dll.config.js is to pack all third-party library dependencies into a bundle dll file, and a file named manifest.json is also generated.
The function of the manifest.json is to map DllReferencePlugin to related dependencies.

The DllReferencePlugin  plug-in is used in webpack.config.js. The role of the plug-in is to reference the dll file just packaged and generated in webpack.dll.config.js to the required pre-compiled dependencies. What does that mean? That is to say, after packaging in webpack.dll.config.js, for example, vendor.dll.js file and vendor-manifest.json file will be generated, vendor.dll.js file contains all third-party library files, vendor-manifest.json file It will contain an index of all library codes. When the webpack.config.js file is used to package the DllReferencePlugin plug-in, the DllReferencePlugin plug-in will be used to read the vendor-manifest.json file to see if there is the third-party library. The vendor-manifest.json file is just a mapping of a third-party library.

So the first time you use the webpack.dll.config.js file to package the third-party library, after the packaging is completed, it will not be packaged again, and then every time you run the webpack.config.js file, the project itself will be packaged When you need to use third-party dependencies, DllReferencePlugin plug-in will be used to read third-party dependent libraries. So its packaging speed will be greatly improved

How to use DLLPLUGIN and DLLREFERENCEPLUGIN in the project

Because it is the scaffolding of vue3.x, so here is the configuration method in vue.config; in fact, even if you use the scaffolding of vue2.x, the directory is different, and the method is the same. After all, these tasks are done by webpack

First, create a webpack.dll.conf js file code in the root directory as follows:

const path = require('path')
const webpack = require('webpack')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// dll文件存放的目录(建议存放到public中)
const dllPath = './public/vendor'
module.exports = {
  mode: 'production',
  entry: {
    vendor: ['vue/dist/vue.runtime.esm.js', 'vuex', 'vue-router', 'element-ui', 'axios', 'moment']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, dllPath),
    library: '[name]_[hash]'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.join(__dirname, dllPath, '[name].manifest.json'),
      context: process.cwd()
    })
  ]

Note: I don’t know if the webpack of the project package is 3.x. You need to install webpack-cli in the project; npm i webpack-cli -D**

As in the above code, we also use the clean-webpack-plugin plug-in, which cleans the last folder each time.

The DllPlugin plug-in has three configuration parameters as follows:
context (optional):  the context requested in the manifest file, the default is the webpack file context.
name: The name of the  public dll function, consistent with output.library.
path:  The location and file name of the manifest.json generated file.

Then we need to configure commands in scripts in the package "dll": "webpack -p --progress --config ./webpack.dll.config.js"so that we can extract the package separately when needed

Here is the focus, vue.config.js is configured as follows:

const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
function resolve(dir) {
  return path.join(__dirname, dir)
}
const dllReference = (config) => {
  config.plugin('vendorDll')
    .use(webpack.DllReferencePlugin, [{
      context: __dirname,
      manifest: require('./public/vendor/vendor.manifest.json')
    }])
  config.plugin('addAssetHtml')
    .use(AddAssetHtmlPlugin, [
      [
        {
          filepath: resolve(__dirname, 'public/vendor/vendor.dll.js'),// dll文件位置
          outputPath: 'vendor',// dll最终输出的目录
          publicPath: '/vendor'// dll 引用路径
        }
      ]
    ])
    .after('html')
}
module.exports = {
true......
truechainWebpack: config => {
    dllReference(config)
  },
}

Use add-asset-html-webpack-plugin to save the step of manually modifying template/html

The parameters of the DllReferencePlugin item are as follows:

context:  the context requested in the manifest file.
Manifest:  The absolute path of a manifest for loading JSON at compile time.
context:  request mapping to module id (default value is manifest.content)
name: name of the  exposed place of dll (default value is manifest.name)
scope:  prefix of content in dll.
sourceType:  How the libraryTarget is exposed by the dll.

effect

32.065s before packaging using DllPlugin

After packaging with DllPlugin, it takes 8.524s