What is?

Instead of being a complete executable file, many applications are split into relatively independent dynamic link libraries, or DLLS, placed on the system. When we execute a program, the corresponding DLL file will be called. An application program can use more than one DLL file, and a DLL file may be used by different applications. Such DLL files are called shared DLLS.

1. The dynamic link library in Webpack is: Webpack will automatically recompile and package every time the content is changed. If we pull out the external libraries such as React and jquery, we can directly reference these files without requiring WebPack to repackage them, the recompile and package will be much faster. This will improve the efficiency of our development.

2. Dynamic link libraries are designed to help you develop faster, allowing webPack to be packaged faster when recompiled.

3. Implement DLL mainly depends on two plug-ins in a webpack webpack. DllReferencePlugin and webpack DllPlugin, remember good the first two.

The installation

1. To start from scratch, create a new file to initialize the packaged basic configuration.

2. Let’s take the React library as an example. Suppose we want react to be a dynamically linked library that doesn’t need to be recompiled every time.

Initialize the

$ npm init -y

Install some basic packages

$ sudo npm i webpack webpack-cli react react-dom html-webpack-plugin webpack-dev-server clean-webpack-plugin Babel-loader @babel/core @babel/preset-env @babel/preset-react –save-dev Follows with some basic [webpack.config.js] Github.com/Ewall1106/webpack-demo/blob/master/webpack-dll/webpack.config.js configuration, the previous articles have been gradually introduced in detail, here are one has brought, This article focuses only on how DLLS are configured.

Then we write a few lines of random code in the entry file, and when we run we’ll see hello World pop up on the page.

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<div>hello world</div>, document.getElementById('app'));
Copy the code

We’re going to use React as a dynamically linked library, So we separate to create a packaging configuration file – [webpack. React. Js] github.com/Ewall1106/webpack-demo/blob/master/webpack-dll/webpack.react.js

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

module.exports = {
  mode: 'development',

  entry: {
    react: ['react', 'react-dom'],
  },

  output: {
    filename: '_dll_[name].js',
    path: path.resolve(__dirname, './dist'),
    library: '_dll_[name]',
    libraryTarget: 'umd',
  },

  plugins: [
    new webpack.DllPlugin({
      name: '_dll_[name]',
      path: path.resolve(__dirname, 'dist', 'manifest.json'),
    }),
  ],
};
Copy the code

The webpack.DllPlugin in plugins generates a manifest file called manifest.json, which you can define as a table. Tell Webpack to find it in this file instead of repacking and compiling React.

The react file and manifest.json dependency tables are now packaged in the dist folder.

$ npx webpack --config webpack.react.js
/dist
+ _dll_react.js
+ manifest.json
Copy the code

Setting dependencies now we are in the master configuration file

module.exports = { // ... / /... Plugins: [/ / when using the react to use, go to the table to find new webpack inside. DllReferencePlugin ({manifest: path.resolve(__dirname, 'dist', 'manifest.json'), }), ], };Copy the code

This tells Webpack that when we introduce the react library in our pages, we should go directly to manifest.json and refer to the packaged _dll_react.

summary

Compare these two methods, the basic faster about 10ms, if your project is large, some react, vue, jquery library configuration, then the development efficiency is considerable.

/ SRC /index.js 172 bytes [built][code generated] webpack 5.4.0 compiled successfully in 56 ms Js 172 bytes [built][code generated] webpack 5.4.0 compiled successfully in 41 msCopy the code

DLL is a scary name, but in fact it is not difficult to configure, the main use of Webpack’s own implementation of the two plug-ins, so simple to say here.