草庐IT

大数据请把文章推给想了解DLL的人

一颗冰淇淋 2023-03-28 原文

DLL(Dynamic Link Library)动态链接库在 webpack 中用来将可共享且不常改变的代码抽取成公共的库。

没有使用 DLL

reactreact-dom 在 react 项目中是必备的两个库,把它们抽取出来单独打个包。

首先进行安装 npm install react react-dom --save

在 src 目录下新建 index.jsx 文件,编写 react 代码

import React, { Component } from 'react';
export default class App extends Component {
  state = {
    message: 'hello react ',
  };
  render() {
    return <div>{this.state.message}</div>;
  }
}

在一层级的 index.js 中引入 react 组件,并安装 axios 后使用它来发送一个请求

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.jsx';
import axios from 'axios';

ReactDOM.render(<App />, document.getElementById('container'));
axios.get('https://httpbin.org/get').then((res) => {
  console.log('res', res);
});

react 代码需要通过 babel 进行处理,可以参考 这篇文章,在没有使用 DLL 的时候,第三方库 react react-domaxios 都被打包到了 702.js 文件中。

1_没有使用dll.png

打包DLL库

如果需要对某些资源单独打包,就可以使用到 DLL,新建 webpack.dll.js 文件,自定义编译规则,通过 DllPlugin 生成 manifest.json文件,其中包含依赖的映射关系。

const { DllPlugin } = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    react: ['react', 'react-dom'],
  },
  output: {
    filename: './[name].js',
    path: path.resolve(process.cwd(), './dll'),
    library: '[name]',
  },
  plugins: [
    new DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, './dll/manifest.json'),
    }),
  ],
};

执行 npx webapck --config ./webpack.dll.js 后,生成三个文件,mainfest.jsonreact.js 和一个注释文件(可通过TerserPlugin去除)

2_dllPlugin.png

如果此时直接编译 webpack.config.js 文件的话,reactreact-dom还是会被作为第三方库和 axios 编译到一起。

引入DLL库

虽然已经通过 DLLreactreact-dom 自行打包了,但是没有告诉 webpack.config.js 不需要再把这两者打包到公共的库中。这时候请出 DllReferencePlugin 来处理。

const { DllReferencePlugin } = require('webpack');

module.exports = {
  // 其它配置省略
  plugins: [
    new DllReferencePlugin({
      manifest: path.resolve(process.cwd(), './dll/manifest.json'),
      context: path.resolve(process.cwd(), './'),
    }),
  ],
};

此时第三方库的 js 文件里已经没有了 reactreact-dom,文件名由 702.js 变成了 559.js 是因为内容发生了变化。

3_dllReferencePlugin.png

运行编译后的 index.html 文件,发现报错 react is not defined,也没有在页面中显示 hello react 的代码。

4_react找不到.png

将文件添加到 html 中

这是因为第三库打包的 js 文件中排除了 reactreact-dom ,自行打包的 react.js 又没有被引入到 html 文件中,所以执行的时候就找不到文件了。

安装插件 add-asset-html-webpack-plugin ,通过它来引入文件到 html 中

const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
  // 其它配置省略
  plugins: [
    new AddAssetHtmlWebpackPlugin({
      filepath: path.resolve(process.cwd(), './dll/react.js'),
      outputPath: './auto',
    }),
  ],
};

这样通过 DLL 编译的 react.js 文件就被引入到 html 文件中,页面也能正常显示

5_assAssetHtmlWebpackPlugin.png

总结

使用 DLL 可以自定义打包的内容,分为以下三个步骤。

  • webpack.dll.js 中使用 DllPlugin 生成 mainfest.json 和 js 文件
  • webpack.config.js 中使用 DllReferencePlugin 去 mainfest.json 文件中找到映射关系,排除不需要打包的库
  • webpack.config.js 中通过 add-asset-html-webpack-plugin 在 html 文件引入资源

以上是关于使用 DLL 打包的总结, 更多有关 webpack 的内容可以参考我其它的博文,持续更新中~

有关大数据请把文章推给想了解DLL的人的更多相关文章

  1. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  2. ruby - Ruby 有 `Pair` 数据类型吗? - 2

    有时我需要处理键/值数据。我不喜欢使用数组,因为它们在大小上没有限制(很容易不小心添加超过2个项目,而且您最终需要稍后验证大小)。此外,0和1的索引变成了魔数(MagicNumber),并且在传达含义方面做得很差(“当我说0时,我的意思是head...”)。散列也不合适,因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题,但我很想知道:Ruby标准库是否已经带有这样一个类? 最佳

  3. c# - 如何在 ruby​​ 中调用 C# dll? - 2

    如何在ruby​​中调用C#dll? 最佳答案 我能想到几种可能性:为您的DLL编写(或找人编写)一个COM包装器,如果它还没有,则使用Ruby的WIN32OLE库来调用它;看看RubyCLR,其中一位作者是JohnLam,他继续在Microsoft从事IronRuby方面的工作。(估计不会再维护了,可能不支持.Net2.0以上的版本);正如其他地方已经提到的,看看使用IronRuby,如果这是您的技术选择。有一个主题是here.请注意,最后一篇文章实际上来自JohnLam(看起来像是2009年3月),他似乎很自在地断言RubyCL

  4. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  5. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  6. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

    本教程将在Unity3D中混合Optitrack与数据手套的数据流,在人体运动的基础上,添加双手手指部分的运动。双手手背的角度仍由Optitrack提供,数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照:https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming,开始向Unity3D广播数据;MotionVenus中设置->选项选择Unit

  7. 使用canal同步MySQL数据到ES - 2

    文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目,Java开发。基于数据库增量日志解析,提供增量数据订阅&消费。Git地址:https://github.co

  8. ruby-on-rails - 创建 ruby​​ 数据库时惰性符号绑定(bind)失败 - 2

    我正在尝试在Rails上安装ruby​​,到目前为止一切都已安装,但是当我尝试使用rakedb:create创建数据库时,我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf

  9. STM32读取串口传感器数据(颗粒物传感器,主动上传) - 2

    文章目录1.开发板选择*用到的资源2.串口通信(个人理解)3.代码分析(注释比较详细)1.主函数2.串口1配置3.串口2配置以及中断函数4.注意问题5.源码链接1.开发板选择我用的是STM32F103RCT6的板子,不过代码大概在F103系列的板子上都可以运行,我试过在野火103的霸道板上也可以,主要看一下串口对应的引脚一不一样就行了,不一样的就更改一下。*用到的资源keil5软件这里用到了两个串口资源,采集数据一个,串口通信一个,板子对应引脚如下:串口1,TX:PA9,RX:PA10串口2,TX:PA2,RX:PA32.串口通信(个人理解)我就从串口采集传感器数据这个过程说一下我自己的理解,

  10. SPI接收数据异常问题总结 - 2

    SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位(1bit)。SPI数据收发是数据交换,因此接收数据时从第二个字节开始才是有效数据,也就是数据整体向右移一个字节(1byte)。请教前辈之后也没有得到解决,通过在网上查阅前人经验终于解决问题,所以写一个避坑经验总结。实际背景:MCU与一款芯片使用spi通信,MCU作为主机,芯片作为从机。这款芯片采用的是它规定的六线SPI,多了两根线:RDY和INT,这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手

随机推荐