webpack DLL 动态链接库

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

是什么?

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

  • 翻译一下,在 webpack 中的动态链接库就是:由于每次更改了内容 webpack 都会自动重新编译打包,如果我们把用到的如 reactjquery 这些外部库抽离出去,改变文件的时候不让 webpack 重新打包这部分文件,直接引用,那么重新编译打包的速度就会快很多,这样我们开发的效率也会提升。

  • 再翻译一下,所谓动态链接库就是帮你提升开发效率的,使 webpack 在重编译的时候能打包更快。

  • webpack 中实现 DLL 主要依赖两个插件 webpack.DllReferencePluginwebpack.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

设置依赖

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
  • DLL 这个名称很吓人,但是其实配置起来并不难,主要就是利用了 webpack 自己实现的两个插件,就简单的说到这里。

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):