【javascript】webpack 使用 DllPlugin加速构建

桃扇骨 2022-03-06 19:36 222阅读 0赞

### 什么是Dll ###

windows系统里面，你肯定看到过.dll后缀的文件，这些文件叫做动态链接库，其他模块可以调用此库里面的内容。

我们在web项目中的dll也是类似的概念，将web项目依赖的`基础`模块给抽离出来，打包到一个个单独的动态链接库中。并且一个动态链接库可以包含多个基础模块。

当需要导入的模块存在于某个动态链接库中，这个模块不能被webpack再次打包，而且直接去动态链接(基础)库中去寻找。

### 为什么需要在web项目中引入这个概念 ###

因为大部分基础模块只需要被编译一次，而之后的构建过程中被动态链接库包含的模块不会重新被编译，而是直接只用动态链接库中的代码。

由于动态链接库中大多数包含的是我们项目依赖的第三方代码比如 react/react-dom或者 vue/vuex等包，这些包在除了大版本升级之外，不需要在每一次构建的时候都去编译。

大白话： 将不常变动的第三方库，单独打包成dll文件，不用每次构建都去编译这些不会变动的文件，提升构建速度。

### 如何使用 ###

需要通过两个webpack内置的插件来完成。

DllPlugin插件： 在独立的配置文件webpack\_dll.config.js中使用，用来打包一个个独立的dll文件。

DllReferencePlugin插件： 用于在主要的配置文件（一般是webpack.config.js）中引用DllPlugin插件打包好的动态链接库文件。

言简意赅：

1， 首先我们要先用webpack去导入webpack\_dll.config.js中的配置，然后根据配置生成动态链接库文件，生成的文件是单独的js文件。

2， 然后我们在webpack.config.js配置文件中使用DllReferencePlugin去引入这些第一步生成的动态链接库文件，并且告知webpack不要再去编译这些文件。

tips： 下面这个配置是基于vue-cli创建的webpack模板项目来做，你可以完全根据你自己的结构来做，核心只有上面两点

--------------------

### 第一步，根据wepack\_dll.config.js生成dll文件 ###

新建好这个配置文件，位置在build目录下，内容如下：

然后执行

npx webpack --config .\build\webpack_dll.config.js

在根目录 dist下面就会多了vue.dll.js 和 vue.manifest.json文件。

vue.manifest.json文件是用来描述动态链接库文件中模块的映射信息【自行打开文件查看】。

### 第二步 在webpack.config.js中使用DllPluginReference引用 ###

我们在build的webpack.prod.conf.js中添加：

const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

然后 plugins里面添加:

// 告诉 Webpack 使用了哪些动态链接库
        new DllReferencePlugin({ 
          manifest: require('../dist/vue.manifest.json'),
        }),

### 第三步，编译项目然后引入dll文件 ###

`注意`：

我们这个例子，使用的是vue-cli创建的项目，在我们编译打包之前，也就是执行`npm run build`之前，要做两件事：

1，请将build/webpack.prod.conf.js下面的removeAttributeQuotes设置为false，不然最后在dist目录生成的html文件引入css和js资源的时候没有引号。

2，然后将config/index.js里面的build对象的`assetsPublicPath`修改为"./"，不然生成的index.html的资源引入会是src = "/static/xxx"这种形式【这也没有问题】，但是为了方便我们快速在webstorm或者intellij 打开这个文件启动临时web服务，建议这样做。

如果你知道如何快速通过nginx启动web服务，也可以不修改上面两个步骤。

在vscode中，使用ctrl + k + f 将html格式化一下，然后加上我们之前生成的vue.dll.js文件。

最终的结果长这样：

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <title>webpack-dll-vue</title>
      <link href="./static/css/app.30790115300ab27614ce176899523b62.css" rel="stylesheet">
    </head>
    
    <body>
      <div id="app"></div>
      
      <script type="text/javascript" src="./vue.dll.js"></script>
      <script type="text/javascript" src="./static/js/manifest.2ae2e69a05c33dfc65f8.js"></script>
      <script type="text/javascript" src="./static/js/vendor.91c9fd66de1730bb7905.js"></script>
      <script type="text/javascript" src="./static/js/app.49ea5ef6129195015be7.js"></script>
    </body>
    
    </html>

bingo，这样我们就不必每次去编译不常变动的第三方基础库了！

你完全可以不用vue，可以用react，也可以不用脚手架直接配置基本的webpack+vue/react 来完成这个demo。

项目在这里： [https://github.com/aeolusheath/webpack-certain-features/tree/master/DllPlugin/vue-dll-project][https_github.com_aeolusheath_webpack-certain-features_tree_master_DllPlugin_vue-dll-project]

[https_github.com_aeolusheath_webpack-certain-features_tree_master_DllPlugin_vue-dll-project]: https://github.com/aeolusheath/webpack-certain-features/tree/master/DllPlugin/vue-dll-project