【前端工程化面试题】如何优化提高 webpack 的构建速度

news2025/3/15 11:11:48
  1. 使用最新版本的 Webpack 和相关插件: 每个新版本的 Webpack 都会带来性能方面的改进和优化,因此始终确保你在使用最新版本。同时,更新你的相关插件也是同样重要的。

  2. 使用DllPlugin动态链接库: 使用DllPlugin和DllReferencePlugin来将第三方库的代码进行预打包,减少构建时间。这个是webpack自带的插件,

    1. DllPlugin 用于创建一个单独的动态链接库,将一些库比如react、lodash 捆绑成一个DLL

    2. DllReferencePlugin 使用上面生成的DLL

  3.  使用缓存: 启用 Webpack 的缓存机制,以避免重复的构建工作

    1. 可以在配置文件中直接配置 cache

    2. 也可以使用一些插件,cache-loaderhard-source-webpack-plugin

  4. 配置别名 resolve.alias: 使用 resolve.alias 配置项,将频繁引用的模块指向绝对路径,减少模块解析的时间,webpack 在模块路径解析时,会根据配置的 alias 进行映射,从而加快解析过程。

  5. 缩小文件搜索范围:: 比如babel-loader插件,如果你的文件仅存在于src中,那么可以include: path.resolve(__dirname, 'src'),当然绝大多数情况下这种操作的提升有限,除非不小心build了node_modules文件

  6. 合理配置 Webpack: 优化 Webpack 的配置文件,包括合理设置 entry、output、resolve、loader 和 plugin 等选项。避免不必要的配置项,以减少构建时间。

  7. 使用更快的 loader: 选择性能更好的 loader,或者对现有的 loader 进行优化。比如使用 thread-loader 来将耗时的 loader 转换为多线程模式。

  8. 使用多进程/多实例构建工具: Webpack 5 支持了更好的多进程/多实例构建,可以通过设置 parallel 选项来启用。这样可以充分利用多核 CPU,加速构建过程。

  9. 减少文件数量和体积: 优化你的代码,尽可能减少不必要的依赖、删除未使用的代码、拆分代码块等,以减少构建的文件数量和体积。

  10. 减少监视文件的数量: 尽量减少 Webpack 监视的文件数量,可以通过配置 watchOptions 来实现。同时,避免使用过多的 glob 模式,以减少文件系统的访问次数。

  11. 使用 Tree Shaking: 使用 Tree Shaking 来移除未使用的代码,减少最终打包输出的文件体积。

  12. 使用 CDN: 将静态资源部署到 CDN 上,减少构建时对于静态资源的处理和打包时间

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

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

相关文章

L2-021 点赞狂魔

一、题目 二、解题思路 统计每个人点赞的不同标签的数量:每行列出一位用户的点赞标签,这些标签可能有重复的,所以将用户的点赞标签存放在 set 里,通过 size() 函数获得点赞的不同标签的数量;结构体包括用户的信息&…

如何打开Windows 10及更低版本系统的控制面板?这里提供详细步骤

Windows中的控制面板是一组小程序,有点像小程序,可以用来配置操作系统的各个方面。 例如,“控制面板”中的一个小程序允许你配置鼠标指针的大小(以及其他内容),而另一个则允许你调整所有与声音相关的设置。 其他小程序可用于更改网络设置、设置存储空间、管理显示设置等…

TIM编码器接口(编码器测速)

定时器编码器接口自动计次--------->对应手册14.3.12编码器接口模式 应用场景: 电机控制PWM驱动电机,编码器测电机速度,PID算法闭环控制 ------------------------------------------------------------------------------------------…

lv15 I2C背景知识(裸机I2C、linux对I2C支持、MPU6050)4

一、I2C总线背景知识 SOC芯片平台的外设分为: 一级外设:外设控制器集成在SOC芯片内部 二级外设:外设控制器由另一块芯片负责,通过一些通讯总线与SOC芯片相连 Inter-Integrated Circuit: 字面意思是用于“集成电路之…

在面试中,如何回复擅长 Vue 还是 React

目录 一、Vue.JS 二、React 三、Vue和React的区别 四、前端开发框架 一、Vue.JS Vue.js(通常简称为Vue)是一个用于构建用户界面的开源JavaScript框架。它采用了MVVM(Model-View-ViewModel)的架构模式,通过数据驱动…

74HC373使用方法

74HC373属于D锁存器 OC:输出控制,低电平输出使能 LE:锁存使能输入,低电平直通,高电平锁存 Q:数据输出引脚 D:数据输入引脚

[VulnHub靶机渗透] Fowsniff

🍬 博主介绍👨‍🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收藏…

外包干了3个多月,技术退步明显。。。。

先说一下自己的情况,本科生,19年通过校招进入广州某软件公司,干了接近3年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…

linux 网络服务小实验

实验图和要求: 1)网关服务器:ens36:12.0.0.254/24,ens33:192.168.44.254/24;Server1:192.168.44.20/24;PC1和Server2:自动获取IP;交换机无需配置。…

[职场] 优质简历怎么做 #学习方法#笔记

优质简历怎么做 简历是求职的“敲门砖”,直接影响着求职成败。然而,不少求职者对简历不太重视,认为简历就是写自己的经历。因此,在招聘现场,常会看到这样的简历:有的是从某招聘网站直接下载而来&#xff0c…

基于SFLA算法的神经网络优化matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 SFLA的基本原理 4.2 神经网络优化 5.完整程序 1.程序功能描述 基于SFLA算法的神经网络优化。通过混合蛙跳算法,对神经网络的训练进行优化,优化目标位神经网络的…

第13章 网络 Page744~746 asio核心类 ip::tcp::endPoint

2. ip::tcp::endpoint ip::tcp::socket用于连接TCP服务端的 async_connect()方法的第一个入参是const endpoint_type& peer_endpoint. 此处的类型 endpoint_type 是 ip::tcp::endpoint 在 在 ip::tcp::socket 类内部的一个别名。 libucurl 库采用字符串URL表达目标的地…

【Unity】【VR开发】针对VR项目的优化版Unity Build Settings

【背景】 编辑器中做了功能后,打包后却总会画面不满意,所以到处学习,总结成本篇,希望有用。 【准备】 本篇总结基于Unity 2021 LTS。 模板选择3D(URP) 如果URP不支持所用的部分Assets,那么也可以选择Built-in管线,不过URP肯定画面效果上要胜过Built-in。 HDRP不适用…

火绒(显示病毒HEUR:Trojan/AvKiller.c),误删explore.exe,导致电脑白屏,解决方法

桌面程序explore.exe被火绒当病毒清理了 对,就是火绒导致的,如果按照操作依然黑/白屏,直接找到火绒安装目录打开火绒在右上角设置区找到隔离区里把explorer全部恢复,然后根据提示加到白名单,最后关闭程序后重启或者直接…

《汇编语言》- 读书笔记 - 实验9 根据材料编程

《汇编语言》- 读书笔记 - 实验9 根据材料编程 需求所需的相关知识属性字节每一位的含义 分析字符位置属性 解答思路代码 效果 需求 在屏幕中间分别显示 绿色、绿底红色、白底蓝色 的字符串 welcome to masm!。 所需的相关知识 80x25 彩色字符模式显示缓冲区(以下简称为显示…

C语言-----函数功能实现---strcpystrlen

1.函数功能参数介绍 该函数的功能就是把一个字符串复制到另外的一个数组,包括\0; 2.首先我们要明确字符串的复制也是包括最后的\0的; void mystrcpy(char* dest, char* src) {while (*src!\0){*dest *src;dest;src;}*dest *src;} int mai…

VMwareWorkstation17.0虚拟机安装搭建Windows 11虚拟机(完整图文详细步骤教程)

VMwareWorkstation17.0虚拟机安装搭建Windows 11虚拟机(完整图文详细步骤教程) 一、下载Windows11二、配置Windows11虚拟机机器环境三、启动Windows11系统 一、下载Windows11 【点击打开最全面的Windows 11原版系统镜像下载地址】 https://blog.csdn.ne…

STM32——OLED菜单

文章目录 一.补充二. 二级菜单代码 简介:首先在我的51 I2C里面有OLED详细讲解,本期代码从51OLED基础上移植过来的,可以先看完那篇文章,在看这个,然后按键我是用的定时器扫描不会堵塞程序,可以翻开我的文章有单独的定时…

HCIA-HarmonyOS设备开发认证V2.0-IOT硬件子系统-GPIO

目录 一、GPIO 概述二、GPIO模块相关API三、实例四、GPIO HDF驱动开发4.1、LED驱动程序(待续...)4.2、LED驱动配置(待续...) 坚持就有收获 轻量系统设备通常需要进行外设控制,例如温湿度数据的采集、灯开关的控制,因此在完成内核开发后,需要进…

【无标题】Matlab 之axes函数——创建笛卡尔坐标区

**基本用法:**axes 在当前图窗中创建默认的笛卡尔坐标区,并将其设置为当前坐标区。 应用场景1:在图窗中放置两个 Axes 对象,并为每个对象添加一个绘图。 要求1:指定第一个 Axes 对象的位置,使其左下角位于…