【webpack】优化提升
webpack优化提升
- 安装webpack相关内容
- 向下兼容游览器-@babel/polyfill
- 进一步优化@babel/polyfill
- 模块联邦-共享模块
- 如何提升构建性能
- 通用环境下
- 1,webpack更新到最新版本
- 2,将loader应用于最少数量的必要模块
- 3,引导(每个额外的loader/plugin都有其启动时间,尽量少使用工具
- 4,解析
- 5,小即是快
- 6,持久化缓存
- 7,自定义plugin/loader
- 8,progress plugin
- 9,dll
- 10,worker池
- 开发环境下
- 1,增量编译
- 2,在内存中编译
- 3,stats.to.Json加速
- 4,Devtool
- 5,避免在生产环境才用到的工具
- 6,最小化 entry chunk
- 7,避免额外的优化步骤
- 8,输出结果不携带路径信息
- 9,Node.js版本问题
- TypeScript Loader
- 生产环境下
- 不启用sourcMap
安装webpack相关内容
- npm init -y,自动建立package.json
- npm install webpack webpack-cli npm install webpack-dev-server html-webpack-plugin -D
向下兼容游览器-@babel/polyfill
-
某些代码在低版本游览器无法兼容使用

-
采用@babel/polyfill兼容
-
步骤一:先安装
-
npm i @babel/polyfill -D
-
页面导入

-
npx webpack打包后最终效果
-
很多很多的内容,是因为把游览器许多需要优雅降级的一些包都打在这个项目里面了

进一步优化@babel/polyfill
-
原因:import @babel/polyfill,这样是全局引入整个polyfill包,包体积大,会污染全局环境
-
采取这个方式
-
npm i exports-loader -D
-
npm install core-js@3

-
最后页面上删除import @babel/polyfill即可,npx webpack即可
模块联邦-共享模块
- 直接将一个应用的包应用于另一个应用
- 同时具备整体应用以及打包的能力


- 两者的webpack配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
//导入模块联邦
const { ModuleFederationPlugin } = require('webpack').container;module.exports = {mode: 'production',entry: './src/index.js',plugins: [new HtmlWebpackPlugin(),//实例化一下new ModuleFederationPlugin({name: 'nav', //标识联邦模块的名字,别的应用访问这个组件就要通过这个名字filename: 'remoteEntry.js', //这个远端使用这个模块的名字remotes: {}, //引用其他的联邦模块exposes: {//暴露组件'./Header': './src/Header.js', //./Header代表到时候别人用的时候基于这个路径拼接url},shared: {},}),],
};

- 内容调用

如何提升构建性能
通用环境下
1,webpack更新到最新版本
2,将loader应用于最少数量的必要模块

3,引导(每个额外的loader/plugin都有其启动时间,尽量少使用工具
4,解析

5,小即是快

6,持久化缓存

7,自定义plugin/loader

8,progress plugin

9,dll

- 注意使用dll的时候,必须先安装jquery
const path = require('path');
const webpack = require('webpack');
module.exports = {mode: 'production',entry: {jquery: ['jquery'],},output: {filename: '[name.js]',path: path.resolve(__dirname, 'dll'),library: '[name]_[hash]',},plugins: [new webpack.DllPlugin({name: '[name]_[hash]',path: path.resolve(__dirname, 'dll/manifest.json'),}),],
};
- 然后package.json里配置一下

- 运行时间就会降低了


- 注意,此时提升了构建速度,但画面是不行的
- 要再配置一下webpack.config.js

10,worker池

- 注意,不要使用太多的worker,因为node.js的runtime和loader都有启动开销,启动会消耗时间
- 当遇到比较大的进程,再使用
- npm i thread-loader -D
- 在webpack.config.js中
module.exports = {mode: 'development',entry: './src/index.js',module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: [//使用worker池分流{loader: 'thread-loader',options: {workers: 2,},},{//目的,解析一些es6的代码loader: 'babel-loader',options: {presets: ['@babel/preset-env'],},},],},],},
};
开发环境下
1,增量编译

2,在内存中编译

3,stats.to.Json加速

4,Devtool

5,避免在生产环境才用到的工具

6,最小化 entry chunk

7,避免额外的优化步骤

8,输出结果不携带路径信息

9,Node.js版本问题

TypeScript Loader

生产环境下
不启用sourcMap

相关文章:
【webpack】优化提升
webpack优化提升 安装webpack相关内容向下兼容游览器-babel/polyfill进一步优化babel/polyfill模块联邦-共享模块如何提升构建性能通用环境下1,webpack更新到最新版本2,将loader应用于最少数量的必要模块3,引导(每个额外的loader/…...
视频无损放大修复工具Topaz Video AI 新手入门教程
想要自学Topaz Video AI ?Topaz Video AI 如何使用?这里给大家带来了视频无损放大修复工具Topaz Video AI 新手入门教程,快来看看吧! 下载:Topaz Video AI for mac 导入您的文件 有两种方法可以将文件导入 Topaz Vid…...
《向量数据库指南》——Milvus Cloud 「部署」:简化部署一直在路上
“docker-compose 能部署分布式吗?”"单机部署为什么还依赖这么多组件?"“大家 Milvus Cloud 集群部署有没有实践过比较好的方案?” 作为一个开源数据库,是否能够进行快速部署,是所有工作的前提。在简化部署的道路上,社区从来没有停止过脚步。2023 年,社区推…...
使用x86架构+Nvidia消费显卡12G显存,搭建智能终端,将大模型本地化部署,说不定是未来方向,开源交互机器人设计
1,大模型本地部署 视频说明地址: https://www.bilibili.com/video/BV1BF4m1u769/ 【创新思考】(1):使用x86架构Nvidia消费显卡12G显存,搭建智能终端,将大模型本地化部署,语音交互机…...
关于RabbitMQ面试题汇总
什么是消息队列?消息队列有什么用? 消息队列是一种在应用程序之间传递消息的通信机制。它是一种典型的生产者-消费者模型,其中生产者负责生成消息并将其发送到队列中,而消费者则从队列中获取消息并进行处理。消息队列的主要目的是…...
GoogleTest 单元测试
假设我们有两个函数 complexFunction 和 helperFunction,其中 complexFunction 调用了 helperFunction。我们将编写测试 complexFunction 的单元测试,并在调用 helperFunction 的地方打桩。 // 复杂函数示例 int helperFunction(int x) {return x * 2; …...
Mac利用brew安装mysql并设置初始密码
前言 之前一直是在windows上开发后段程序,所以只在windows上装mysql。(我记得linux只需要适应yum之类的命令即可) 另外, linux的移步 linux安装mysql (详细步骤,初次初始化,sql小例子,可视化操作客户端推荐) 好家伙,我佛了,写完当天网上发…...
R语言入门笔记2.2
ifelse语句 结构:ifelse(条件,表达式1,表达式2) #满足条件,则进入表达式1,否则为表达式2 例1: > a1 > ifelse(a<0,"a小于0",ifelse(a0,0,"a大于0")) [1] "a大于0"a1 - 这行代码给变量a…...
一般系统的请求认证授权思路【gateway网关+jwt+redis+请求头httpheader】
gateway:网关,我们都知道网关的作用就是对系统的所有请求,网关都会进行拦截,然后做一些操作(例如:设置每个请求的请求头httpHeader,身份认证等等)此时一般会使用到网关过滤器&#x…...
c# 正则表达式 帮助类
public class RegexHelper { /// <summary> /// 验证输入字符串是否与模式字符串匹配,匹配返回true /// </summary> /// <param name"input">输入字符串</param> /// <param nam…...
告别mPDF迎来TCPDF和中文打印遇到的问题
mPDF是一个用PHP编写的开源PDF生成库。它最初由Claus Holler创建,于2004年发布。原来用开源软件打印中文没有问题,最近发现新的软件包中mPDF被TCPDF代替了,当然如果只用西文的PDF是没有发现问题,但要打印中文就有点抓瞎了如图1&am…...
mysql 多数据源
依赖 <dependencies><!--mysql连接--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><!--多数据源--><dependency><g…...
uniapp 使用renderjs引入echarts
效果图: 1.1renderjs引入echarts 组件zmui-echarts.vue: <template><view class"zmui-echarts" :prop"option" :change:prop"echarts.delay"></view> </template><script>export defaul…...
hr最讨厌这6种应届生简历❌
用求职方法,让你变成offer收割机,是我的责任❗ 简历写得好,面试少不了。最近很多应届生找龙猫帮看简历,我发现很多应届生是真不会写简历啊。 有的简历排版花里胡哨,有的自我评价千篇一律,有的实习经历太过…...
【Linux笔记】文件系统与软硬链接
一、文件系统概述 1.1、先来聊一聊“磁盘” 在讲解文件系统之前,我觉得有必要先聊一下“磁盘”,因为我觉得如果弄懂了磁盘的存储原理,大家可能更容易理解文件系统是怎么管理数据的,并且理解计算机是怎么将磁盘抽象到文件系统的。…...
vue3(笔记)
组合式Api setup-----相当于beforeCreate, create生命周期 reactive–定义状态 对象形式 响应式原理 toRefs— Pinia (只有state、getters和actions) 更加简洁的语法,完美支持Vue3的Composition api 和 对TypesCcript的完美支持...
Java面向对象 this
this 在Java中,this 是一个特殊的引用变量,它引用了当前对象实例。当在类的非静态方法或构造方法中使用时,this 关键字指代当前的对象实例。它经常用于区分对象的成员变量和局部变量,或者调用其他重载的方法。 以下是一些使用 t…...
阿里云游戏服务器租用价格表,2024最新报价
阿里云游戏服务器租用价格表:4核16G服务器26元1个月、146元半年,游戏专业服务器8核32G配置90元一个月、271元3个月,阿里云服务器网aliyunfuwuqi.com分享阿里云游戏专用服务器详细配置和精准报价: 阿里云游戏服务器租用价格表 阿…...
2-1 动手学深度学习v2-Softmax回归-笔记
回归 VS 分类 回归估计一个连续值分类预测一个离散类别 从回归到多类分类 回归 单连续数值输出输出的区间:自然区间 R \mathbb{R} R损失:跟真实值的区别 分类 通常多个输出(这个输出的个数是等于类别的个数)输出的第 i i i…...
laravel distinct查询问题,laravel子查询写法
直接调用后,count查询会和实际查询的数据对不上,count还是查询全部数据,而实际的列表是去重的。 给distinct加上参数,比如去重的值的id,就加id。 另一种写法是使用group by id 子查询。 sql语句: selec…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
GitFlow 工作模式(详解)
今天再学项目的过程中遇到使用gitflow模式管理代码,因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存,无论是github还是gittee,都是一种基于git去保存代码的形式,这样保存代码…...
【C++进阶篇】智能指针
C内存管理终极指南:智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用
中达瑞和自2005年成立以来,一直在光谱成像领域深度钻研和发展,始终致力于研发高性能、高可靠性的光谱成像相机,为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...
前端开发者常用网站
Can I use网站:一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use:Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站:MDN JavaScript权威网站:JavaScript | MDN...
