webpack DLL 动态链接库

Ewall

发布于 2020-12-01 10:27:08

2.2K0

发布于 2020-12-01 10:27:08

文章被收录于专栏：vue学习vue学习

项目地址：https://github.com/Ewall1106/webpack-demo

是什么？

许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立的动态链接库，即 DLL 文件，放置于系统中。当我们执行某一个程序时，相应的 DLL 文件就会被调用。一个应用程序可使用多个 DLL 文件，一个 DLL 文件也可能被不同的应用程序使用，这样的 DLL 文件被称为共享 DLL 文件。— 百度百科

翻译一下，在 webpack 中的动态链接库就是：由于每次更改了内容 webpack 都会自动重新编译打包，如果我们把用到的如 react、jquery 这些外部库抽离出去，改变文件的时候不让 webpack 重新打包这部分文件，直接引用，那么重新编译打包的速度就会快很多，这样我们开发的效率也会提升。
再翻译一下，所谓动态链接库就是帮你提升开发效率的，使 webpack 在重编译的时候能打包更快。
在 webpack 中实现 DLL 主要依赖两个插件 webpack.DllReferencePlugin 和 webpack.DllPlugin，先记好这两个即可。

安装

还是从头开始，先新建一个文件初始化一下打包的基本配置。
我们以 react 这个库为例，假设我们要把 react 做为动态链接库，让其不需要每次重新编译。

# 初始化
$ npm init -y
# 安装一些基础的包
$ sudo npm i webpack webpack-cli react react-dom html-webpack-plugin webpack-dev-server clean-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

接下来就是一些基本的 webpack.config.js 配置了，这些前面文章都已经就逐步详细介绍了，这里就一笔带过了，本篇文章只重点说明 DLL 怎么配置的。
然后我们在入口文件中随便写几行代码，跑起来后我们就可以看到 hello world 跃然于页面上了。

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<div>hello world</div>, document.getElementById('app'));

打包 React

我们要把 react 做为动态链接库，所以我们单独为其新建一个打包配置文件 - webpack.react.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',

  entry: {
    react: ['react', 'react-dom'],
  },

  output: {
    filename: '_dll_[name].js',
    path: path.resolve(__dirname, './dist'),
    library: '_dll_[name]',
    libraryTarget: 'umd',
  },

  plugins: [
    new webpack.DllPlugin({
      name: '_dll_[name]',
      path: path.resolve(__dirname, 'dist', 'manifest.json'),
    }),
  ],
};

上面的配置重点是 plugins 插件中配合的 webpack.DllPlugin 这个插件，它会生成一个名为 manifest.json 的文件，你可以理解为就是一张表，我们可以定义依赖，也就是说待会我们用到了 react 的时候，告诉 webpack 就直接在这个文件里找，别重复打包编译 react 了。
打包一下，我们就可以看到 dist 文件夹中出现了打包后的 react 文件和 manifest.json 依赖表了。

$ npx webpack --config webpack.react.js

/dist
+ _dll_react.js
+ manifest.json

设置依赖

现在我们在主配置文件 webpack.config.js 中配置一下依赖。

module.exports = {
  // ...
  // ...
  plugins: [
    // 当使用react的使用，先去这个表里面找
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, 'dist', 'manifest.json'),
    }),
  ],
};

这个就是告诉 webpack，当我们页面中引入使用了 react 这个库的时候，直接去 manifest.json 里去找，然后引用打包好的 _dll_react.js 就行了。

小结

对比这两种方式，基本快了了 10ms 左右，如果你的项目很大，将一些 react、vue、jquery 这些库都进行 DLL 配置后，那么开发效率提高还是可观的。

./src/index.js 172 bytes [built][code generated]
webpack 5.4.0 compiled successfully in 56 ms

// 使用DLL配置react库后：

./src/index.js 172 bytes [built][code generated]
webpack 5.4.0 compiled successfully in 41 ms