当前位置: 首页 > news >正文

【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语句 结构&#xff1a;ifelse(条件,表达式1,表达式2) #满足条件&#xff0c;则进入表达式1&#xff0c;否则为表达式2 例1&#xff1a; > a1 > ifelse(a<0,"a小于0",ifelse(a0,0,"a大于0")) [1] "a大于0"a1 - 这行代码给变量a…...

一般系统的请求认证授权思路【gateway网关+jwt+redis+请求头httpheader】

gateway&#xff1a;网关&#xff0c;我们都知道网关的作用就是对系统的所有请求&#xff0c;网关都会进行拦截&#xff0c;然后做一些操作&#xff08;例如&#xff1a;设置每个请求的请求头httpHeader&#xff0c;身份认证等等&#xff09;此时一般会使用到网关过滤器&#x…...

c# 正则表达式 帮助类

public class RegexHelper { /// <summary> /// 验证输入字符串是否与模式字符串匹配&#xff0c;匹配返回true /// </summary> /// <param name"input">输入字符串</param> /// <param nam…...

告别mPDF迎来TCPDF和中文打印遇到的问题

mPDF是一个用PHP编写的开源PDF生成库。它最初由Claus Holler创建&#xff0c;于2004年发布。原来用开源软件打印中文没有问题&#xff0c;最近发现新的软件包中mPDF被TCPDF代替了&#xff0c;当然如果只用西文的PDF是没有发现问题&#xff0c;但要打印中文就有点抓瞎了如图1&am…...

mysql 多数据源

依赖 <dependencies><!--mysql连接--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><!--多数据源--><dependency><g…...

uniapp 使用renderjs引入echarts

效果图&#xff1a; 1.1renderjs引入echarts 组件zmui-echarts.vue&#xff1a; <template><view class"zmui-echarts" :prop"option" :change:prop"echarts.delay"></view> </template><script>export defaul…...

hr最讨厌这6种应届生简历❌

用求职方法&#xff0c;让你变成offer收割机&#xff0c;是我的责任❗ 简历写得好&#xff0c;面试少不了。最近很多应届生找龙猫帮看简历&#xff0c;我发现很多应届生是真不会写简历啊。 有的简历排版花里胡哨&#xff0c;有的自我评价千篇一律&#xff0c;有的实习经历太过…...

【Linux笔记】文件系统与软硬链接

一、文件系统概述 1.1、先来聊一聊“磁盘” 在讲解文件系统之前&#xff0c;我觉得有必要先聊一下“磁盘”&#xff0c;因为我觉得如果弄懂了磁盘的存储原理&#xff0c;大家可能更容易理解文件系统是怎么管理数据的&#xff0c;并且理解计算机是怎么将磁盘抽象到文件系统的。…...

vue3(笔记)

组合式Api setup-----相当于beforeCreate, create生命周期 reactive–定义状态 对象形式 响应式原理 toRefs— Pinia &#xff08;只有state、getters和actions&#xff09; 更加简洁的语法&#xff0c;完美支持Vue3的Composition api 和 对TypesCcript的完美支持...

Java面向对象 this

this 在Java中&#xff0c;this 是一个特殊的引用变量&#xff0c;它引用了当前对象实例。当在类的非静态方法或构造方法中使用时&#xff0c;this 关键字指代当前的对象实例。它经常用于区分对象的成员变量和局部变量&#xff0c;或者调用其他重载的方法。 以下是一些使用 t…...

阿里云游戏服务器租用价格表,2024最新报价

阿里云游戏服务器租用价格表&#xff1a;4核16G服务器26元1个月、146元半年&#xff0c;游戏专业服务器8核32G配置90元一个月、271元3个月&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云游戏专用服务器详细配置和精准报价&#xff1a; 阿里云游戏服务器租用价格表 阿…...

2-1 动手学深度学习v2-Softmax回归-笔记

回归 VS 分类 回归估计一个连续值分类预测一个离散类别 从回归到多类分类 回归 单连续数值输出输出的区间&#xff1a;自然区间 R \mathbb{R} R损失&#xff1a;跟真实值的区别 分类 通常多个输出&#xff08;这个输出的个数是等于类别的个数&#xff09;输出的第 i i i…...

laravel distinct查询问题,laravel子查询写法

直接调用后&#xff0c;count查询会和实际查询的数据对不上&#xff0c;count还是查询全部数据&#xff0c;而实际的列表是去重的。 给distinct加上参数&#xff0c;比如去重的值的id&#xff0c;就加id。 另一种写法是使用group by id 子查询。 sql语句&#xff1a; selec…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

热门Chrome扩展程序存在明文传输风险,用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...