Webpack性能优化指南:从构建到部署的全方位策略

文章目录

      • 1、webpack的优化-OneOf
      • 2、webpack的优化-Include/Exclude
      • 3、webpack优化-SourceMap
      • 4、webpack的优化-Babel缓存
      • 5、wenbpack的优化-resolve配置
      • 6、构建结果分析

webpack优化在现代前端开发中,Webpack已成为模块打包器的事实标准,它通过将项目中的所有资源(JavaScript、CSS、图片等)打包成一个或多个bundle来优化加载时间和提高缓存效率。然而,随着项目规模的增长,打包过程可能会变得缓慢,影响开发效率。本文将详细介绍一系列Webpack优化技巧,从配置到实践,帮助你提升构建性能,缩短构建时间,并最终改善用户体验。

1、webpack的优化-OneOf

oneof的作用是在module的rules中匹配loader时,会在rules中当匹配到第一个规则时,只使用第一个。如果不使用oneOf则会继续匹配下去,使用 oneOf 可以减少打包时的打包时间,当项目越大时,体现越明显。

在这里插入图片描述

2、webpack的优化-Include/Exclude

Include/Exclude的作用顾名思义可以指定处理文件时,只包含哪些文件,或者排除哪些文件,两者不能同时使用

在这里插入图片描述

Include/Exclude 也可以提升代码打包速度,毕竟不管是 Include 还是 Exclude 都排除掉了一部分的文件

3、webpack优化-SourceMap

sourcemap 可以在打包后增强代码调试,因为打包后的代码是压缩过的,当代码报错时就会提示错误的

位置。sourcemap 会影响打包的速度,,但是可以在项目打包后在控制台可以正确追踪代码报错的位置,并且可以还原出打包前的代码。

在webpack的配置中增加了devtool属性,并赋值为source-map(devtool的值可以参考

在这里插入图片描述

这里对比一下使用前后的区别,使用 devtool 后,可以正确追踪代码报错的位置,并且可以还原出打包前的代码。

4、webpack的优化-Babel缓存

Babel 的缓存可以在第一次打包时将转换过的代码缓存起来,下次再进行打包时就可以避免部分代码的再次转换,从而提升打包速度。Babel 缓存的开启在 Babel 的配置中使用 cacheDirectory:

在这里插入图片描述

配置缓存后再次启动发现node_module中自动生成了一个.catch缓存文件

在这里插入图片描述

5、wenbpack的优化-resolve配置

5.1alias路径别名

alias 用的创建 import 或 require 的别名,用来简化模块引用,项目中基本都需要进行配置

在这里插入图片描述

在app.js中可以使用@代替. 避免在移动文件位置时发生错误

在这里插入图片描述

5.2extensions省略文件名后缀

webpack默认配置

在这里插入图片描述

如果用户引入模块时不带扩展名,例如

import '.src/css/index'

那么 webpack 就会按照 extensions 配置的数组从左到右的顺序去尝试解析模块

需要注意的是:

  1. 高频文件后缀名放前面;
  2. 手动配置后,默认配置会被覆盖

5.4thread-loader使js多线程运行

thread-loader 是一个 webpack loader,它允许你将 loader 的工作分发到多个子进程中去执行,从而提高构建性能。当处理大量文件或执行资源密集型的转换任务时,thread-loader 可以显著减少构建时间。

1.安装

npm i -D thread-loader

2.配置

{loader: 'thread-loader', // 开启多进程打包options: {worker: 3,}
},

6、构建结果分析

借助插件 webpack-bundle-analyzer 我们可以直观的看到打包结果中,文件的体积大小、各模块依赖关系、文件是够重复等问题,极大的方便我们在进行项目优化的时候,进行问题诊断。

1.安装

npm i -D webpack-bundle-analyzer

2.配置

// 引入插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;plugins: [new BundleAnalyzerPlugin({//analyzerMode: 'disabled', // 不启动展示打包报告的http服务器generateStatsFile: true,  // 是否生成stats.json文件})]

3.修改启动命令

"scripts": {
// ...
"analyzer": "cross-env NODE_ENV=prod webpack --progress --mode production"
},

在这里插入图片描述
可以通过这个页面直观的看到打包结果

通过上述优化策略的实施,你可以显著提高Webpack的构建效率和最终产品的性能。记住,优化是一个持续的过程,需要根据项目的具体情况不断调整和改进。每次引入新的库或框架时,都应重新评估其对构建性能的影响,并寻找新的优化机会。通过持续的性能监控和分析,你可以确保你的应用始终保持最佳状态,为用户提供快速、流畅的体验。现在,让我们将这些策略应用到你的项目中,体验构建速度的飞跃吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/885171.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[ DOS 命令基础 4 ] DOS 命令命令详解-端口进程相关命令

🍬 博主介绍 👨‍🎓 博主介绍:大家好,我是 _PowerShell ,很高兴认识大家~ ✨主攻领域:【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 🎉点赞➕评论➕收藏 养成习…

飞书API-获取tenant_access_token

1.在飞书工作台创建应用,跳到开发者后台,选创建企业自建应用 2.设置并发布应用 必须要发布应用才可以开始使用了!!! 3.调用获取token的API 参考链接: 开发文档 - 飞书开放平台https://open.feishu.cn/do…

linux 安装anaconda3

1.下载 使用repo镜像网址下载对应安装包 右击获取下载地址,使用终端下载 wget https://repo.anaconda.com/archive/Anaconda3-2024.02-1-Linux-x86_64.sh2.安装 使用以下命令可直接指定位置 bash Anaconda3-2024.02-1-Linux-x86_64.sh -b -p /home/anaconda3也…

LabVIEW编程过程中为什么会出现bug?

在LabVIEW编程过程中,Bug的产生往往源自多方面原因。以下从具体的案例角度分析一些常见的Bug成因和调试方法,以便更好地理解和预防这些问题。 ​ 1. 数据流错误 案例:在一个LabVIEW程序中,多个计算节点依赖相同的输入数据&#…

【自用】fastapi 学习记录 --请求和参数部分

fastai个人学习笔记 一、模块化结构框架 设置了默认请求头shop之后就无需再app0x里接口函数前全部写上/shop/xxx,或者/user/xxx,他会同意添加~如果都写了就会出现以下的情况(重复shop): 二、请求与响应 关于参数&a…

若依入门案例

若依(RuoYi)框架是一个基于Java的开源企业级快速开发框架,主要用于构建信息管理系统。它结合了多种前端和后端技术,提供了高效的开发工具,并具备以下主要功能: 一、后端功能 技术选型:若依后端…

【Web前端】OOP编程范式

面向对象编程(Object-Oriented Programming,简称 OOP)是一种程序设计思想,它通过将程序视为一组相互作用的对象来设计程序。OOP 提出了一些重要的基本概念,包括类与实例、继承和封装。面向对象编程将系统视为由多个对象…

Mac解决 zsh: command not found: ll

Mac解决 zsh: command not found: ll 文章目录 Mac解决 zsh: command not found: ll解决方法 解决方法 1.打开bash_profile 配置文件vim ~/.bash_profile2.在文件中添加配置:alias llls -alF键盘按下 I 键进入编辑模式3. alias llls -alF添加完配置后,按…

JavaScript 变量声明

const 和 let 都是在 JavaScript ES6 中引入的变量声明方式,它们之间的主要区别在于 是否允许重新赋值 和 作用域。 1. 是否可以重新赋值 let:声明的变量可以在后续代码中被重新赋值。const:声明的变量不能被重新赋值。声明时必须初始化&am…

JavaAPI(1)

Java的API(1) 一、Math的API 是一个帮助我们进行数学计算的工具类私有化构造方法,所有的方法都是静态的(可以直接通过类名.调用) 平方根:Math.sqrt()立方根:Math.cbrt() 示例: p…

UI界面设计入门:打造卓越用户体验

互联网的迅猛发展催生了众多相关职业,其中UI界面设计师成为互联网行业的关键角色之一。UI界面设计无处不在,影响着网站、应用程序以及其他数字平台上的按钮、菜单布局、色彩搭配和字体排版等。UI设计不仅仅是字体、色彩和导航栏的组合,它的意…

python查询日志,并组装sql,修复缺失的数据

前言 由于mysql链接超时波动,导致数据缺失,需要根据日志填补数据 流程 获取确实数据的订单列表 搜索日志,获取请求日志 根据请求日志拼装sql 打印sql供修复数据 代码 因为我们日志打印的有问题,所以这里用字符串截取获取入…

利用Stable Diffusion技术,StableVision能够自动生成高质量、高分辨率的图像,满足用户对于图像素材的多样化需求。

1.产品介绍 产品介绍方案 产品名称: StableVision 图像管理分析系统 主要功能: 高精度图像生成智能分类与检索多维度数据分析定制化模板与导出功能介绍: 高精度图像生成: 具体作用:利用Stable Diffusion技术,StableVision能够自动生成高质量、高分辨率的图像,满足用户…

用户信息管理系统烟草种植用户基于SpringBootSSM框架

目录 一. 系统目标 二 需求分析 2.1 功能描述 2.1.1 用户管理 2.1.2 管理员功能 2.1.3 角色与权限管理 2.1.4 详细功能描述 2.1.5安全与权限控制功能 2.1.6系统维护与扩展功能 2.2. 非功能需求 2.3用户角色 2.4技术描述 三、数据库设计 3.1数据库需求分析 3.2数…

std::back_inserter

std::back_inserter 是 C 标准库中的一个函数模板&#xff0c;它用于创建一个插入迭代器&#xff08;insert iterator&#xff09;&#xff0c;这个迭代器可以在容器末尾插入新元素。它定义在 <iterator> 头文件中。 函数原型 template <typename Container> bac…

在 Mac 和 Windows 系统中快速部署 OceanBase

OceanBase 是一款分布式数据库&#xff0c;具备出色的性能和高扩展性&#xff0c;可以为企业用户构建稳定可靠、灵活扩展性能的数据库服务。本文以开发者们普遍熟悉的Windows 或 Mac 环境为例&#xff0c;介绍如何快速上手并体验OceanBase。 一、环境准备 1. 硬件准备 OceanB…

如何有效销售和应用低代码软件?探索其市场机会与策略

随着技术的进步&#xff0c;企业对自动化和数字化的需求日益增加。低代码开发平台应运而生&#xff0c;成为企业实现快速应用程序开发的重要工具。然而&#xff0c;在市场上推广和应用低代码软件并非易事&#xff0c;需要深入了解客户需求&#xff0c;提供定制化的解决方案&…

Docker启动gitlab后22端口被占用如何解决

文章目录 前言Docker启动参数解决方案总结 前言 这两天一直在研究Docker启动gitlab的问题&#xff0c;邮件问题暂时告一段落&#xff0c;当真正开始使用gitlab克隆的时候发现&#xff0c;之前22端口被占用无法启动&#xff0c;我就用2022端口做了一个映射&#xff0c;但是在gi…

【如何使用 ADB 脚本批量停止 Android 设备上的所有应用】

在 Android 开发和测试中,有时候我们需要批量停止设备上的所有应用进程。为此,我们可以使用一个简单的 ADB 脚本来自动完成这一任务。本文将介绍如何编写和使用这个脚本。 脚本介绍 下面的脚本通过 ADB 命令来列出并停止所有正在运行的 Android 应用进程。无需指定设备时,默…

在函数内部定义函数

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 在函数内部定义函数 在以下代码片段中&#xff0c;输出的结果是什么&#xff1f; def outer_function(x): def inner_function(y): return x y return inner_function add_five outer_func…