webpack打开项目命令_使用 Webpack 的 DllPlugin 提升项目构建速度

本文介绍了 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

Webpak DllPlugin 的使用

复制代码

在 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

复制代码

使用 DllPlugin 和 DllReferencePlugin(分为三步)