Writing is not easy, without the permission of the author forbid to reprint in any form! If you think the article is good, welcome to follow, like and share!

Know the DLL library

• What is a DLL

  • DLL is the full name of Dynamic Link Library, which is a way of realizing shared function Library for software in Windows.
  • So Webpack also has built-in DLL function, it refers to can be shared, and not often change the code, extract into a shared library;
  • This library will be introduced into the code of other projects later in the compilation process, reducing the packaging time;

• There are two steps to using the DDL library:

  • Step 1: Package a DLL library;
  • Step 2: Introduce DLL libraries into the project

DLL packaging

DllPlugin is built into Webpack to help generate DLL files

• webpack.common.js
  • Context: execution context,
  • Entry:
    • Key: name (placeholder)
    • Value: specifies the package name
  • Output (general)
  • plugins
    • DllPlugin
      • Name: Defines the name of the generated DLL file
      • Path: indicates the path of the DLL file

const path = require("path");
const {DllPlugin} = require("webpack");
const {merge} = require("webpack-merge")

const commonConfig = (isProduction) = >{
    return {
        context: path.resolve(__dirname, ".. /"),
        entry: {
            react: ["react"."react-dom"]},output: {
           path:path.resolve(__dirname,".. /dll"),
            filename:"dll_[name].js".library:"dll_[name]"
        },
        plugins: [
            new DllPlugin({
                name:'[name].manifest.json'.path:path.resolve(__dirname, ".. /dll/[name].manifest.json")})],}}const devConfig = require('./webpack.dev')
const prodConfig = require('./webpack.prod')

module.exports = function (env) {
    const isProduction = env.production;
    process.env.NODE_ENV = isProduction ? "production" : "development"

    const config = isProduction ? prodConfig : devConfig
    return merge(commonConfig(isProduction), config)
}
Copy the code

Once packaged, there is a DLL folder in the root directory containing the DLL file and the corresponding manifest.json file.

DLL using

• If we use react and react-DOM in our code, with splitChunks configured, they will be subcontracted and packaged into a separate chunk.
  • With dll_react, we don’t need to package them separately. We can reference dll_react directly:
  • Step 1: Use the DllReferencePlugin to inform the DLL library to be used;
  • Step 2: Introduce the packaged DLL library into the Html module via the AddAssetHtmlPlugin plugin.

new DllReferencePlugin({
    context:path.resolve(__dirname, ".. /"),
    manifest:path.resolve(__dirname,".. /dll/react.manifest.json")}),new AddAssetHtmlWebpackPlugin({
    outputPath:".. /build/js".filepath:path.resolve(__dirname, ".. /dll/dll_react.js")})Copy the code

• Nuggets: Front-end LeBron

• Zhihu: Front-end LeBron

• Continue to share technical blog posts, follow the wechat public account 👉🏻 front-end LeBron