当前位置: 首页 > 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…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

Neko虚拟浏览器远程协作方案:Docker+内网穿透技术部署实践

前言&#xff1a;本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中&#xff0c;跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南&#xff0c;你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案&#xff0c;并结合内网…...