在现代web应用程序，Webpack处理了许多工作，从转换Javascript、处理css、打包代码等等。Webpack是一个强大而灵活的工具，但是当你的webpack编译时间变慢时，使用该工具变得更加困难。这个时候，我们就需要 autodll-webpack-plugin 这个工具了。autodll-webpack-plugin 可以明显的加快webpack的编译速度。在这篇文章中，我将讲解如何使用 autodll-webpack-plugin 来减少webpack的编译时间。
为什么需要 autodll-webpack-plugin
让我们先看看前端开发中经常性的问题：Webpack编译时间的问题。当我们的webpack编译时间变慢时，每次webpack运行都会浪费大量的时间，这会导致团队的生产效率降低。这个问题在大型且复杂的应用中尤其严重。为了解决这个问题，我们需要解决以下两个方面的问题：
- 第一次webpack运行后，启动webpack-dev-server时间太长，热重载也很慢。
- 当webpack额外需要加载的JavaScript资源过多时，Webpack编译过程将变得比较慢。
为了解决这些问题，我们需要在Webpack配置中添加我们的npm包 autodll-webpack-plugin。
autodll-webpack-plugin 简介
autodll-webpack-plugin 是一个用于Webpack的插件，可以根据预设的依赖项，将依赖包打包成一个单独的 bundle。这样，我们就可以避免在每次webpack编译时加载大量JavaScript资源，从而提高我们的webpack编译速度。
autodll-webpack-plugin 安装
我们可以通过npm来安装 autodll-webpack-plugin，只需要在命令行中执行以下命令：
npm install autodll-webpack-plugin --save-dev
autodll-webpack-plugin 配置
在Webpack中，我们需要添加以下代码片段来配置 autodll-webpack-plugin。我们需要做以下工作：
- 添加 DllPlugin 以生成 Dll 文件。
- 在 Webpack 配置中添加 DllReferencePlugin 以链接这些 Dll 图书馆。
- 自动编译器是 Webpack 的 Hooks 之一，它可以监听编译过程并在编译完成时触发 callback 函数。因此，我们需要将 AutodllPlugin 实例化和传递到每个 compiler.hooks.compilation.tap 上。
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- ------------- - ----------------------------------
----- ------ - -
------ -
---- ------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- ---------------
------- ----- -- ---------- ---- -
------ ----- -- ------
--------- ------------------- -- -------
----- -------- -- --------
------ -
------- --------- -------------
--
---
--- ----------------------------
-------- ----------
--------- -------------------------------------
--
-
--
-------------- - -------autodll-webpack-plugin 使用
我们仅仅需要在 plugins 中添加 autodll-webpack-plugin 就完成了配置。然后在 Webpack 编译时打开 DllPlugin，这是我们基于所需的要求配置并引入 DllReferencePlugin 就能使用了。
以下是我们的 webpack.config.js 文件：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- ------------- - ----------------------------------
----- ------ - -
------ -
---- ------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- ---------------
------- -----
------ -----
--------- -------------------
----- --------
------ -
------- --------- -------------
--
---
--- ----------------------------
-------- ----------
--------- -------------------------------------
--
-
--
-------------- - -------其中，我们的DllPlugin和DllReferencePlugin都是在plugins中实现的，而DllPlugin则是在 AutodllPlugin 中被打开和配置的。
在你建立以上配置之后，你可以运行你的webpack打包程序了：
npm run build
autodll-webpack-plugin 示例
下面是一个具体的代码示例，这个示例使用React开发了一个TodoList，autodll-webpack-plugin 被用于打包 React 和 React-DOM。
- 首先，在命令行中初始化一个名为
todolist的项目，并在项目中运行npm install。
npx create-react-app todolist cd todolist npm install
- 在
src文件夹中创建AutodllExampleComponent.js文件，并编辑如下内容：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------------------- ------- --------------- -
-------- -
------ -
-----
----------- ------- ---- ---------
---
---- -- -- ------- -- ----- ---------------------- -- ----- -- ----- ------
----
------
--
-
-
------ ------- ------------------------- 在
src文件夹中创建App.js文件，并编辑如下内容：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------------------- ---- ----------------------------
------ ------- ----- --- ------- --------- -
-------- -
------ -
------------------------ --
--
-
-- 在
index.js文件中添加如下内容：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));将
index.html文件中的title修改为Autodll Example Todo List。安装 npm 包：
npm install autodll-webpack-plugin --save-dev
- 修改
webpack.config.js文件：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- ------------- - ----------------------------------
----- ------ - -
------ -
---- ----------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- ---------------
------- -----
------ -----
--------- -------------------
----- --------
------ -
------- --------- -------------
--
---
--- ----------------------------
-------- ----------
--------- -------------------------------------
--
-
--
-------------- - -------- 运行打包程序：
npm run build
现在，打开浏览器，在地址栏输入 http://localhost:3000/，你将看到一个可爱的 todo list 了。
以上就是 autodll-webpack-plugin 的使用方法，它可以帮助我们提升webpack编译速度，在我们重构时，非常实用，也可以让我们更快的提供高质量的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedca47b5cbfe1ea06123cb