Webpack 5 Tree Shaking与Module Federation
Webpack是一个流行的JavaScript模块打包器,它在前端工程化中扮演着核心角色。Webpack 5引入了许多新特性,其中两个最值得关注的是Tree Shaking和Module Federation。这两个特性分别解决了代码体积优化和微前端架构的问题。接下来,我们将深入探讨这两个特性,包括它们的工作原理、配置方法以及如何在实际项目中应用它们。
Tree Shaking
Tree Shaking是一种编译时优化技术,旨在移除未使用的代码,从而减小最终输出文件的大小。在Webpack中,Tree Shaking主要针对ES6模块进行优化,因为它依赖于模块的静态结构来确定哪些代码片段实际上不会被使用。
Tree Shaking工作原理
Tree Shaking依赖于ES6模块的特性,即模块的导入和导出必须在文件的顶级作用域声明。这意味着Webpack可以静态分析整个代码树,找出哪些导入实际上没有被使用,从而安全地移除它们。
如何启用Tree Shaking
Webpack默认支持Tree Shaking,但需要确保你的代码使用了ES6模块语法。这意味着你应当使用import和export语句,而不是CommonJS的require和module.exports。
此外,Webpack的mode配置应该设置为production,因为Tree Shaking在开发模式下是禁用的:
module.exports = {mode: 'production',
};
Tree Shaking的限制
虽然Tree Shaking可以显著减小包的大小,但它也有一定的限制。例如,如果你的代码中包含副作用(side effects),Webpack将无法移除这部分代码,即使它看起来没有被直接使用。
Module Federation
Module Federation是Webpack 5引入的一项新特性,它允许你将多个项目中的模块以联邦的形式组合在一起,无需打包成单个巨大的文件。这在微前端架构中特别有用,因为它允许每个微前端独立开发和部署,同时在运行时动态加载和共享模块。
Module Federation工作原理
Module Federation通过在运行时动态加载远程模块来实现。当你在项目A中引用项目B中的模块时,Webpack会生成一个运行时代理,该代理知道如何从项目B中请求和加载模块。这使得模块可以在多个项目之间共享,而无需显式打包或发布。
配置Module Federation
为了在项目中启用Module Federation,你需要在Webpack配置文件中添加ModuleFederationPlugin
。以下是一个简单的配置示例:
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");module.exports = {plugins: [new ModuleFederationPlugin({name: "host",filename: "remoteEntry.js",exposes: {"./Component": "./src/Component",},shared: ["react", "react-dom"],}),],
};
在这个配置中,name定义了模块联邦的名字,filename
指定了远程入口文件的名称,exposes
列出了要暴露的模块,而shared
则定义了要共享的依赖项。
使用远程模块
在另一个项目中,你可以通过import语句来使用远程模块:
import remoteComponent from "host/Component";
Webpack会自动处理远程模块的加载和执行。
实践案例
假设我们有两个项目:ProjectA和ProjectB。ProjectA将共享一个React组件,而ProjectB将使用这个组件。
在ProjectA的Webpack配置中,我们添加ModuleFederationPlugin
:
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");module.exports = {plugins: [new ModuleFederationPlugin({name: "projectA",filename: "remoteEntry.js",exposes: {"./MyComponent": "./src/MyComponent",},shared: ["react", "react-dom"],}),],
};
在ProjectB中,我们配置Webpack以使用ProjectA的远程模块:javascript
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");module.exports = {plugins: [new ModuleFederationPlugin({remotes: {projectA: "projectA@http://localhost:3001/remoteEntry.js",},shared: ["react", "react-dom"],}),],
};
然后在ProjectB的代码中,我们可以像使用本地模块一样使用ProjectA的远程模块:
import MyComponent from "projectA/MyComponent";function App() {return (<div><MyComponent /></div>);
}export default App;
总结
Webpack 5的Tree Shaking和Module Federation特性为前端开发带来了显著的改进。Tree Shaking有助于减少最终包的大小,而Module Federation则促进了微前端架构的实现,使得多个项目之间的模块共享变得简单。理解并熟练掌握这些特性,将帮助你构建更加高效和可维护的前端应用。
相关文章:
Webpack 5 Tree Shaking与Module Federation
Webpack是一个流行的JavaScript模块打包器,它在前端工程化中扮演着核心角色。Webpack 5引入了许多新特性,其中两个最值得关注的是Tree Shaking和Module Federation。这两个特性分别解决了代码体积优化和微前端架构的问题。接下来,我们将深入探…...
免费分享一套微信小程序图书馆座位预约管理系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】,帅呆了~~
大家好,我是java1234_小锋老师,看到一个不错的微信小程序图书馆座位预约管理系统(SpringBoot后端Vue管理端),分享下哈。 项目介绍 随着移动互联网技术的飞速发展和智能设备的普及,图书馆服务模式正在经历深刻的变革。本论文旨在…...
k8s入门:从安装到实际应用
Kubernetes (K8s) 入门指南:从安装到实际应用 Kubernetes 是一个开源的容器编排平台,用于自动化容器化应用程序的部署、扩展和管理。它能帮助你管理多个容器化应用程序,并确保它们在不同环境下的一致性和可用性。本文将介绍如何在本地环境安…...
基于Qt的上位机通用框架
0.前言 最近一年多的时间一直在开发设备控制相关的软件,加上之前在聚光的两年时间,前前后后开发这种设备控制类型的上位机软件也有三年的时间了。总结出了一套基于Qt的上位机编程框架,核心思想类似于C#的依赖注入,对象的初始化都…...
Vulnhub靶场DC-7练习
目录 0x00 准备0x01 主机信息收集0x02 站点信息收集1. 获取用户名/密码2. ssh连接目标主机3. drush命令修改Drupal密码 0x03 漏洞查找与利用1. Drupal写入php木马2. 连接shell3. 反弹shell并提权 0x04 总结 0x00 准备 下载链接:https://download.vulnhub.com/dc/DC-…...
吴恩达深度学习笔记1 Neural Networks and Deep Learning
参考视频:(超爽中英!) 2024公认最好的【吴恩达深度学习】教程!附课件代码 Professionalization of Deep Learning_哔哩哔哩_bilibili Neural Networks and Deep Learning 1. 深度学习引言(Introduction to Deep Learning) 2. 神 经 网 络 的 编 程 基 础…...
(十)Spring教程——Spring配置概述
目录 前言 1.Spring容器高层视图 2.基于XML的配置 前言 在使用Spring所提供的各项丰富而神奇的功能之前,必须在Spring IoC容器中装配好Bean,并建立好Bean和Bean之间的关联关系。Spring的配置文件已经很精简了,但是广大的开发者希望它做得更…...
飞书群聊机器人自定义机器人接入,并实现艾特@群成员功能
飞书群聊机器人还是比钉钉的要麻烦一点,钉钉的直接通过手机号就可以艾特群里面的人,但是飞书的要想艾特群里面的人,需要使用用户的 Open ID 或 User ID。这两个ID怎么获取呢?还需要在飞书的开放平台上创建一个应用,然后…...
CrowdStrike更新致850万Windows设备宕机,微软紧急救火!
7月18日,网络安全公司CrowdStrike发布了一次软件更新,导致全球大范围Windows系统宕机。 预估CrowdStrike的更新影响了将近850万台Windows设备,多行业服务因此停滞,全球打工人原地放假,坐等吃瓜,网络上爆梗…...
银行黄金交易流程
银行黄金交易流程 银行黄金交易流程通常包括以下几个步骤: 咨询和开户: 首先,客户需要到银行的贵金属交易柜台或在线平台咨询黄金交易的相关规定和手续,然后进行开户,在银行开立有关黄金交易的账户。这可能需要提供个…...
MATLAB实验五:MATLAB数据分析
1. 某线路上不同时间对应的电压如下表所示: 1)用 3 次多项式拟合(polyfit)该实验曲线,要求绘制 2 原始采样 点,并在 1~8 范围内,使用时间间隔为 0.2 的数据绘制拟合曲线。 建立一个脚本文件:text5_1.m 如下…...
Cannot perform upm operation: connect ETIMEDOUT 34.36.199.114:443 [NotFound]
版本:Unity 2018 Windows 问题:打开 Package Manager,加载报错 尝试解决: 删除项目文件里的Packages下的mainfest.json文件,然后重新打开项目(X)重新登录 Unity 账号(X)…...
Docusaurus VS VuePress:哪一个更适合你的技术文档?
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…...
昇思25天学习打卡营第25天|MindNLP ChatGLM-6B StreamChat
配置环节 %%capture captured_output !pip uninstall mindspore -y !pip install -i https://pypi.mirrors.ustc.edu.cn/simple mindspore2.2.14 !pip install mindnlp !pip install mdtex2html配置国内镜像 !export HF_ENDPOINThttps://hf-mirror.com下载与加载模型 from m…...
海康威视综合安防管理平台 detection 前台RCE漏洞复现
0x01 产品简介 海康威视综合安防管理平台是一套“集成化”、“智能化”的平台,通过接入视频监控、一卡通、停车场、报警检测等系统的设备。海康威视集成化综合管理软件平台,可以对接入的视频监控点集中管理,实现统一部署、统一配置、统一管理和统一调度。 0x02 漏洞概述 海康…...
【BUG】已解决:ModuleNotFoundError: No module named ‘PIL‘
已解决:ModuleNotFoundError: No module named ‘PIL‘ 目录 已解决:ModuleNotFoundError: No module named ‘PIL‘ 【常见模块错误】 错误原因: 解决办法: 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我…...
css font 优化
文章目录 使用 font-display 控制字体加载预加载关键字体选择合适的字体文件类型按需创建字体文件HTTP 缓存优化 使用 font-display 控制字体加载 避免字体加载导致的空白 block:浏览器在短暂的阻塞期内不显示任何文本,直到字体加载完成。这可能导致页…...
Go之Web急速入门Gin+Gorm框架
简介 只作为快速入门、了解Go的GinGorm框架的demo,不能作为企业级开发。 详细用法请看官网 《Gin官网》 《Gorm官网》 使用GoLand创建Go项目(默认modules) go版本1.22.2 需要设置代理下载go相关软件包,否则软件包可能无法下载。…...
【MySQL进阶之路 | 高级篇】ER模型
1. 概述 数据库设计是牵一发而动全身的。那么有没有什么办法可以提前看到数据库的全貌呢?比如需要哪些数据表,数据表中应该有哪些字段,通过什么字段进行连接等等。这样我们才能进行整体的梳理和设计。 其实,ER模型就是一个这样的…...
C++基础语法:STL之容器(4)--序列容器中的list(一)
前言 "打牢基础,万事不愁" .C的基础语法的学习 引入 序列容器的学习.以<C Prime Plus> 6th Edition(以下称"本书")内容理解 本书中容器内容不多只有几页.最好是有数据结构方面的知识积累,如果没有在学的同时补上. 序列容器回顾:序列容器内元素按严格…...
WordPress杂技
WordPress杂技 WordPress页面构建器: Avada、Elementor、astra、 Elementor作为一款强大的页面构建工具。 Avada:是一款非常受欢迎的WordPress主题,它的设计理念是简洁、现代、响应式,Avada拥有丰富的模板和布局,可以轻松创建出…...
鸿蒙 动态共享包HSP的创建和引用
1.什么是动态共享包HSP HSP(Harmony Shared Package)是动态共享包,可以包含代码、C库、资源和配置文件,通过HSP可以实现代码和资源的共享。HSP不支持独立发布,而是跟随其宿主应用的APP包一起发布,与宿主应…...
ARM架构(二)—— arm v7-a/v8/v9寄存器介绍
1、ARM v7-A寄存器 1.1 通用寄存器 V7 V8开始 FIQ个IRQ优先级一样, 通用寄存器:31个 1.2 程序状态寄存器 CPSR是程序状态毒存器,保存条件标志位,中断禁止位,当前处理器模式等控制和状态位。每种异常模式下还存在SPS…...
C++合作开发项目:美术馆1.0
快乐星空MakerZINCFFO 合作入口:CM工作室 效果图: 代码: (还有几个音乐!) main.cpp #include <bits/stdc.h> #include <windows.h> #include <conio.h> #include <time.h> #in…...
QT 5 同时使用Q_DECLARE_METATYPE(pointdata) 和继承 QObjectUserData
在Qt框架中,QObjectUserData 和 Q_DECLARE_METATYPE() 宏都与Qt的元对象系统有关,但它们的使用方式有一些特别的限制和兼容性问题。 关于QObjectUserData: QObjectUserData 是一个用来存储用户数据的类。在Qt中,每个 QObject 可以…...
【MySQL进阶之路 | 高级篇】范式概述与第一范式
1. 范式简介 在关系型数据库中,关于数据表的设计的基本原则,规则就称为范式。可以理解为,一张数据表的设计结果需要满足的某种设计标准的级别。要想设计一个结构合理的关系型数据库,必须满足一定的范式。 范式的英文名是Normal …...
Open-TeleVision复现及机器人迁移
相关信息 标题 Open-TeleVision: Teleoperation with Immersive Active Visual Feedback作者 Xuxin Cheng1 Jialong Li1 Shiqi Yang1 Ge Yang2 Xiaolong Wang1 UC San Diego1 MIT2主页 https://robot-tv.github.io/链接 https://robot-tv.github.io/resources/television.pdf代…...
Notepad++换安装路径之后,右键打开方式报错:Windows无法访问指定设备、路径或文件。你可能没有适当的权限访问该项目。的处理方法
把Notepad添加到右键打开方式,可以参考下面的3篇文章添加: https://blog.csdn.net/xiaoerbuyu1233/article/details/88287747 https://blog.csdn.net/qq_44000337/article/details/120277317 https://www.cnblogs.com/zhrngM/p/12899026.html 这里主要是…...
【Flutter 面试题】 使用成熟状态管理库的弊端有哪些?
【Flutter 面试题】 使用成熟状态管理库的弊端有哪些? 文章目录 写在前面口述回答补充说明写在前面 🙋 关于我 ,小雨青年 👉 CSDN博客专家,GitChat专栏作者,阿里云社区专家博主,51CTO专家博主。2023博客之星TOP153。 👏🏻 正在学 Flutter 的同学,你好! 😊 …...
Apache Commons技术详解
文章目录 简介官网链接原理基础使用Commons LangCommons Collections 高级使用Commons IOCommons Math 优缺点优点缺点 总结 简介 Apache Commons 是 Apache 软件基金会下的一个项目,旨在提供可重用的Java组件。这些组件覆盖了广泛的编程任务,从字符串处…...
怎样使用 Juicer tools 的 dump 命令将.hic文件转换为交互矩阵matrix计数文件 (Windows)
创作日志: 万恶的生信…一个scHiC数据集没有提供处理好的计数文件,需要从.hic转换。Github一个个好长的文档看了好久才定位到 juicer tools 的dump命令,使用起来比想象中简单。 一、下载Juicer tools 注意:使用Juicer tools的前提…...
【Docker】Docker Desktop - WSL update failed
问题描述 Windows上安装完成docker desktop之后,第一次启动失败,提示:WSL update failed 解决方案 打开Windows PowerShell 手动执行: wsl --set-default-version 2 wsl --update...
基于rsync\unlink 等一套本机备份跨机备份历史备份清理shell 脚本
一 摘要 本文主要介绍一套本地备份、跨机器备份、历史备份清理脚本,使用场景如数据库备份等 二 环境 linux 系列系统 基本都支持,个别命令可能需要微调。 2.1 实验环境 [rootlocalhost rsync]# cat /etc/centos-release CentOS Linux release 7.9.2…...
使用nginx实现一个端口和ip访问多个vue前端
前言:由于安全组要求,前端页面只开放一个端口,但是项目有多个前端,此前一直使用的是一个前端使用单独一个端口进行访问,现在需要调整。 需要实现:这里以80端口为例,两个前端分别是:p…...
Linux云计算 |【第一阶段】SERVICES-DAY5
主要内容: 源码编译安装、rsync同步操作、inotify实时同步、数据库服务基础 实操前骤:(所需tools.tar.gz与users.sql) 1.两台主机设置SELinnx和关闭防火墙 setenforce 0 systemctl stop firewalld.service //停止防火墙 sy…...
IP第一次综合实验
一、实验拓扑 二、实验要求 1、R6为ISP,接口IP地址均为公有地址,该设备只能配置地址之后不能冉对其进行任何配置 2、R1-R5为局域网,私有Ip地址192.168.1.0/24,请合理分配 3、R1、82、R4,各有两个环回IP地址;R5,R6各…...
Could not load dynamic library ‘cudart64_100.dll‘
python代码报错 Could not load dynamic library cudart64_100.dll; dlerror: cudart64_100.dll not found 2024-07-22 14:19:21.931639: I tensorflow/stream_executor/cuda/cudart_stub.cc:29] Ignore above cudart dlerror if you do not have a GPU set up on your machine…...
四大引用——强软弱虚
目录 一、强引用 二、软引用 三、弱引用 四、虚引用 一、强引用 强引用是在程序代码之中普遍存在的,类似于“Object obj new Object()”,obj变量引用Object这个对象,就叫做强引用。当内存空间不足,Java虚拟机宁愿抛出OutOfMe…...
MySQL--索引(2)
InnoDB 1.索引类型 主键索引(Primary Key) 数据表的主键列使用的就是主键索引。 一张数据表有只能有一个主键,并且主键不能为 null,不能重复。 在 mysql 的 InnoDB 的表中,当没有显示的指定表的主键时,InnoDB 会自动先检查表中是…...
JVM类加载机制详解
Java在运行期才对类进行加载到内存、连接、初始化过程。这使得Java应用具有极高的灵活性和拓展性,可以依赖运行期进行动态加载和动态连接。 主要加载哪些?Java中的数据类型分为基本数据类型和引用数据类型,基本数据类型由虚拟机预先定义&…...
【MATLAB实战】基于UNet的肺结节的检测
数据: 训练过程图 算法简介: UNet网络是分割任务中的一个经典模型,因其整体形状与"U"相似而得名,"U"形结构有助于捕获多尺度信息,并促进了特征的精确重建,该网络整体由编码器,解码器以及跳跃连接三部分组成。 编码器由…...
Elasticsearch基础(五):使用Kibana Discover探索数据
文章目录 使用Kibana Discover探索数据 一、添加样例数据 二、数据筛选 三、保存搜索 使用Kibana Discover探索数据 一、添加样例数据 登录Kibana。在Kibana主页的通过添加集成开始使用区域,单击试用样例数据。 在更多添加数据的方式页面下方,单击…...
爬取百度图片,想爬谁就爬谁
前言 既然是做爬虫,那么肯定就会有一些小心思,比如去获取一些自己喜欢的资料等。 去百度图片去抓取图片吧 打开百度图片网站,点击搜索xxx,打开后,滚动滚动条,发现滚动条越来越小,说明图片加载…...
HTTP 缓存
缓存 web缓存是可以自动保存常见的文档副本的HTTP设备,当web请求抵达缓存时,如果本地有已经缓存的副本,就可以从本地存储设备而不是从原始服务器中提取这个文档。使用缓存有如下的优先。 缓存减少了冗余的数据传输缓存环节了网络瓶颈的问题…...
设计模式实战:图形编辑器的设计与实现
简介 本篇文章将介绍如何设计一个图形编辑器系统,系统包括图形对象的创建、组合、操作及撤销等功能。我们将通过这一项目,应用命令模式、组合模式和备忘录模式来解决具体的设计问题。 问题描述 设计一个图形编辑器系统,用户可以创建并操作图形对象,将多个图形对象组合成…...
.NET 情报 | 分析某云系统添加管理员漏洞
01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等(包括但不限于)进行检测或维护参考,未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失…...
vue检测页面手指滑动距离,执行回调函数,使用混入的语法,多个组件都可以使用
mixin.ts 定义滑动距离的变量和检测触摸开始的方法,滑动方法,并导出两个方法 sendTranslateX.value > 250 && sendTranslateY.value < -100是向上滑动,满足距离后执行回调函数func,并在一秒内不再触发,一…...
opencv 优势
OpenCV(开源计算机视觉库)是一个广泛使用的计算机视觉和机器学习软件框架。它最初由Intel开发,后来由Itseez公司维护,最终于2015年成为非营利组织OpenCV.org的一部分。OpenCV的目的是实现一个易于使用且高效的计算机视觉框架,支持实时视觉应用。 以下是关于OpenCV的一些关…...
1-如何挑选Android编译服务器
前几天,我在我的星球发了一条动态:入手洋垃圾、重操老本行。没错,利用业余时间,我又重新捣鼓捣鼓代码了。在接下来一段时间,我会分享我从服务器的搭建到完成Android产品开发的整个过程。这些东西之前都是折腾过的&…...
【JS逆向课件:第十六课:Scrapy基础2】
ImagePipeLines的请求传参 环境安装:pip install Pillow USER_AGENT Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.109 Safari/537.36需求:将图片的名称和详情页中图片的数据进行爬取&a…...