When I started, front-end frameworks were all the rage, like React, Angular, and Vue. The benefits of these frameworks are clear: they are convenient, fast, and stable. If the framework is built easily enough for people unfamiliar with the business to get started with the project, vue-CLI for example, off-the-shelf scaffolding already integrates basic configurations of common frameworks such as WebPack, ESLint, bable, etc., which may not be optimal but are versatile. For beginners even can not go to understand these common frameworks can directly start the development. It is the convenience of frames that makes them more popular. Vue-cli3 is built directly into third-party plugins, so you can’t see the basic configuration in your working directory and focus on business development. Frameworks are getting easier and dumber. But it’s a cautionary tale for developers. Just because a framework hides a relatively complex black box doesn’t mean we don’t care about its internals, because generic doesn’t mean optimal. So this article attempts to discuss webPack optimization. This article is the first webpack series dllPlugin optimization.

DllPlugin optimization before talking about DllPlugin, have to mention DLL, first of all according to the example put a Baidu example

Dynamic Link Library (DLL) is short for Dynamic Link Library. A DLL is a library that contains code and data that can be used by multiple programs simultaneously. Updates can be more easily applied to individual modules without affecting other parts of the program. For example, you might have a payroll calculator where tax rates change every year. When these changes are isolated in DLLS, you can apply the updates without having to rebuild or install the entire program.

In terms of the front end, if you are developing using the VUE stack and you change one line of business code, it will not affect the VUE source code, but when you build, you find that all the code has been rebuilt, which is obviously unreasonable, and the DllPlugin is the solution to this problem. Let’s build a separate module out of the third-party library that doesn’t change the business code build results no matter how much we change it, and next time just reference the off-the-shelf build results as long as we don’t change the third-party library.

So how do you use it? Because WebPack already has built-in support for dynamic link libraries, it’s just a matter of packaging dynamic link libraries with the DllPlugin and introducing them into the main build with the DllReferencePlugin. These two steps will be described in detail below.

The build file needs to be written separately from the master configuration, because the master configuration is used to package the master file, while the dynamic link library is packaged as the dependent file of the master build

const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// Directory for storing DLL files
const dllPath = 'dll'

module.exports = {
  entry: {
    // The library file to extract
    vendor: ['vue'.'vue-router'.'core-js']},output: {
    path: path.join(__dirname, dllPath),
    filename: '[name]-dll.[hash:8].js'.// This exposes your Library bundle as a global variable named [name]_[hash]
    // Keep the name consistent with the name in the webpack.DllPlugin configuration
    library: '[name]_[hash]'
  },
  plugins: [
    // Clear the previous DLL file
    new CleanWebpackPlugin(),
    // This plug-in comes with WebPack and does not need to be referenced separately
    // Set environment variables
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')}}),// This plug-in comes with WebPack and does not need to be referenced separately
    // manifest.json describes what the dynamic link library contains
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
      // The name must be the same as the name in output.library
      name: '[name]_[hash]'.context: process.cwd()
    })
  ]
}
Copy the code

Now that you have the package file, you can package it by adding a command DLL to package.json to build it

"dll": "webpack --progress --config ./build/webpack.dllconf.js"
Copy the code

And when I run it, I get this dynamic link library file, which I’m going to put here for later. It is then introduced in the main build.

The first step is to configure the DllReferencePlugin for the DllReferencePlugin for the DllReferencePlugin for the DllReferencePlugin for the DllReferencePlugin for the DllReferencePlugin for the DllReferencePlugin for the DllReferencePlugin for the DllReferencePlugin for the DllReferencePlugin for the DllReferencePlugin. The MANIFEST specifies which dependent modules are included in the dynamically linked library.

// WebPack comes with plugins
// Create DllReferencePlugin in batches
 new webpack.DllReferencePlugin({
     context: process.cwd(),
     manifest: require('./build/dll/vendor-manifest.json')}),Copy the code

So far we have optimized the build speed, but for the project to run, the dynamic library file needs to be injected into index.html

// If the plugin does not insert files into HTML properly, it is either not executed after the HTMl-webpack-plugin or version compatible
// Please refer to the latest add-asset-html-webpack-plugin
new AddAssetHtmlPlugin({
    // DLL file location
    filepath: path.resolve(__dirname, './build/dll/*.js'),
    // DLL reference path
    publicPath: './vendor'.// DLL final output directory
    outputPath: './vendor'
 })
Copy the code

Since vue-CLI created the project directly as demo, the configuration written using vue.cnfig.js is written using the configureWebpack configuration item, which is no different from the WebPack configuration

const path = require('path')
const webpack = require('webpack')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

module.exports = {
  publicPath: '/'.// This configuration item means to merge webPack configuration into vuE-CLI built-in framework
  configureWebpack: {
    plugins: [
      // WebPack comes with plugins
      // Create DllReferencePlugin in batches
      new webpack.DllReferencePlugin({
        context: process.cwd(),
        manifest: require('./build/dll/vendor-manifest.json')}),// If the plugin does not insert files into HTML properly, it is either not executed after the HTML-webpack-plugin or version-compatible
      // Please refer to the latest add-asset-html-webpack-plugin
      new AddAssetHtmlPlugin({
        // DLL file location
        filepath: path.resolve(__dirname, './build/dll/*.js'),
        // DLL reference path
        publicPath: './vendor'.// DLL final output directory
        outputPath: './vendor'}}})]Copy the code

Execute the package command and you can see that the DLL files are copied to the dist directory and referenced in index.html. Because tripartite library files such as Vue, loadash, Vant and so on, if there is no special case, it is likely that there will not be any version change, and its resources are relatively large. Building a dynamically linked library saves time and optimizes the development experience.