使用 Webpack 的 DllPlugin 提升项目构建速度

最新推荐文章于 2024-08-29 09:51:05 发布

浮沉半生

最新推荐文章于 2024-08-29 09:51:05 发布

阅读量647

点赞数 1

分类专栏：前端开发 Webpack Webpack 文章标签：前端开发 Webpack

本文链接：https://blog.csdn.net/zgd826237710/article/details/87605286

版权

本文详细介绍了如何使用Webpack的DllPlugin和DllReferencePlugin来提升项目构建速度。通过创建动态链接库，避免重复编译常用第三方库，如lodash。同时，结合AddAssetHtmlWebpackPlugin自动将动态链接库文件引入HTML，简化部署流程。

摘要由CSDN通过智能技术生成

文章目录

本文介绍了 Webpack 中 DllPlugin 插件的使用，以及配合使用 AddAssetHtmlPlugin 将构建好的 JS 文件插入到 html 页面中。

本文 Demo 地址

本文项目代码位置：源码地址

欢迎 Star！

DLLPlugin 和 DllReferencePlugin 简介

DLLPlugin 就是将包含大量复用模块且不会频繁更新的库进行编译，只需要编译一次，编译完成后存在指定的文件（这里可以称为动态链接库）中。在之后的构建过程中不会再对这些模块进行编译，而是直接使用 DllReferencePlugin 来引用动态链接库的代码。因此可以大大提高构建速度。一般会对常用的第三方模块使用这种方式，例如 react、react-dom、lodash 等等。只要这些模块不升级更新，这些动态链接库就不需要重新编译。

在 Webpack 中进行使用

需要插件

Webpack 已经内置了对动态链接库的支持，需要通过两个内置插件的配合使用。它们分别是：

DllPlugin 插件：用于打包出一个个单独的动态链接库文件
DllReferencePlugin 插件：用于在主配置文件中去引入 DllPlugin 插件打包好的动态链接库文件

创建项目

找一个空文件夹，打开命令行，执行命令

# 创建项目目录
$ mkdir webpack-dll-demo

# 初始化 package.json 文件
$ npm init -y 

# 创建 src 文件夹
$ mkdir src

# 创建 public 文件夹
$ mkdir public

# 安装需要用到的插件
$ npm install webpack webpack-cli html-webpacl-plugin clean-webpacl-plugin friendly-errors-webpack-plugin -D

# 安装 lodash 插件，用于演示 DllPlugin 用法
$ npm install lodash

在 public 目录下创建 index.html 文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Webpak DllPlugin 的使用</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

在 src 目录下创建 index.js 文件

index.js

import {
    join } from 'lodash';

function createSpan(){
   
    const element = document.createElement('span');
    element.innerHTML = join(['Hello', 'DllPlugin'], ' , ');
    return element;
}

document.querySelector('#root').appendChild(createSpan());

当前项目目录结构

webpack-prod-demo
|- /public
  |- index.html
|- /src
  |- index.js
|- package.json

最低0.47元/天解锁文章