前端面试问题汇总 - 工程管理工具篇

1. webpack常用loader有哪些?

  • babel-loader: 用于将 ES6+ 代码转换为向后兼容的 JavaScript 代码,以便在旧版本的浏览器中运行。
  • css-loader: 用于加载 CSS 文件,并解析其中的 import 和 url 引用关系。
  • style-loader: 将 CSS 代码插入到页面的 style 标签中,使其生效。
  • sass-loader / less-loader: 用于加载和编译 Sass 或 Less 文件,将其转换为 CSS。
  • file-loader / url-loader: 用于加载和处理文件资源,例如图片、字体等。file-loader 将文件复制到输出目录并返回其路径,而 url-loader 可以根据文件大小将其转换为 base64 编码的 Data URL。
  • vue-loader: 用于加载和解析 Vue 单文件组件,将其转换为 JavaScript 模块。
  • eslint-loader: 用于集成 ESLint,用于检查 JavaScript 代码中的语法和代码规范错误。
  • postcss-loader: 用于在 CSS 中运行 PostCSS 插件,以实现自动添加浏览器前缀、压缩 CSS 等功能。
  • ts-loader / awesome-typescript-loader: 用于加载和解析 TypeScript 文件,将其转换为 JavaScript。
  • image-webpack-loader: 用于压缩和优化图片文件,以减小文件体积。
  • raw-loader: 用于加载文件的原始内容,而不进行任何转换。

2. 如何从工程的角度优化初始化页面白屏的问题?

  • 优化网络请求:
    • 减少网络请求次数:合并和减少资源文件(如 CSS、JavaScript)的数量,减少 HTTP 请求次数。
    • 延迟加载资源:对于非关键资源,可以延迟加载,等页面核心内容加载完成后再加载这些资源。
  • 压缩和合并资源
    • 使用工具压缩和合并 CSS、JavaScript 文件,减少文件大小,提高加载速度。
    • 使用图像压缩工具来减小图片大小,提高图片加载速度。
  • 使用 CDN 加速:
    • 使用 CDN(内容分发网络)来加速静态资源的加载,减少服务器响应时间和网络传输时间。
  • 使用预加载和预渲染
    • 对于下一步即将要访问的页面,可以使用预加载和预渲染技术,提前加载页面所需的资源,加快页面的加载速度。
    • 在 Vue 或 React 等单页面应用中,可以使用路由懒加载技术,只加载当前页面所需的组件和资源。
  • 优化首屏渲染:
    • 避免在页面加载过程中阻塞渲染,尽快将首屏内容渲染出来,给用户一个反馈。
    • 使用服务器端渲染(SSR)预渲染技术,提前生成页面的 HTML 内容,减少客户端渲染时间。
  • 使用缓存:
    • 使用浏览器缓存服务器缓存来缓存静态资源,减少重复加载的次数。
    • 合理设置缓存过期时间,避免缓存过期导致资源重新加载。
  • 异步加载脚本:
    • 将不必要的 JavaScript 脚本标记为异步加载,使页面能够更快地呈现出来。

3. vite和webpack

  • Vite:
    • 基于 ESBuild: Vite 使用 ESBuild 作为其内部的构建引擎,ESBuild 是一个基于 Go 语言开发的超快 JavaScript 构建工具,具有出色的性能和速度。
    • 即时预构建(Instant Pre-Build): Vite 支持即时预构建的方式,即在开发过程中,当你访问一个尚未构建的模块时,Vite 会立即构建并提供该模块的最新版本,而不需要像 webpack 那样预先构建整个应用
    • 按需导入(On-Demand Imports): Vite 支持按需导入,即只有在需要时才会加载和构建相关的模块,从而加快页面加载速度。
    • 原生 ES 模块支持: Vite 原生支持 ES 模块,无需额外配置,可以直接在项目中使用 ES 模块。
  • Webpack:
    • 功能强大: webpack 是一个功能强大的静态模块打包工具,支持模块化开发、代码分割、加载器、插件等多种功能。
    • 生态丰富: webpack 生态系统庞大,拥有大量的加载器和插件,可以满足各种复杂项目的构建需求
    • 配置灵活: webpack 的配置非常灵活,可以根据项目的需求进行高度定制,但也需要较多的配置和学习成本
    • 社区活跃: webpack 拥有庞大的社区支持和活跃的维护团队,有大量的文档、教程和解决方案可供参考。

        综合来看,Vite 更适合于快速构建、开发阶段的项目,特别是针对小型项目和单页面应用。而 webpack 则更适用于复杂项目和对构建过程有较高定制需求的场景

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

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

相关文章

SpringMVC(一)【入门】

前言 学完了大数据基本组件,SpringMVC 也得了解了解,为的是之后 SpringBoot 能够快速掌握。SpringMVC 可能在大数据工作中用的不多,但是 SSM 毕竟是现在就业必知必会的东西了。SpringBoot 在数仓开发可能会经常用到,所以不废话学吧…

神经网络中的权重初始化

神经网络的权重初始化 从神经网络输入和输出尽量都要有相同的方差出发,但均值很难保持一致(由于有一些非负的激活函数)。而且现有的标准化策略也是起到了同样的作用,如BN,LN等,都是努力将中间层的输出的方…

Mapmost Alpha:开启三维城市场景创作新纪元

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

vue3中使用tailwind.css注意

中文官网 教程 使用PostCSS 注意!!! 成功的关键 vite配置 import tailwindcss from tailwindcssexport default defineConfig({// ...css: {postcss: {plugins: [tailwindcss,]}},// ... })

2024年4月8日腾讯云故障复盘及情况说明

2024年4月8日15点23分,腾讯云团队收到告警信息,云API服务处于异常状态;随即在腾讯云工单、售后服务群以及微博等渠道开始大量出现腾讯云控制台登录不上的客户反馈。 经过故障定位发现,客户登录不上控制台正是由云API异常所导致。云…

面试必备:3个技巧提升表达能力,轻松拿Offer!

在职场竞争中,面试是求职者迈向成功的重要一步。想要在众多竞争者中脱颖而出,获得面试官的青睐并拿下心仪岗位的offer,良好的表达能力不可或缺。今天,我们就一起探讨如何在面试中有效提升自己的表达能力,为成功铺路。 …

C语言如何生成随机数以及设置随机数的范围

一、随机数的生成 1.rand()函数 C语言提供了⼀个函数叫 rand,这函数是可以生成随机数的,函数原型如下所示: int rand (void); rand函数会返回⼀个伪随机数,这个随机数的范围是在0~RAND_MAX之间,这个RAND_MAX的大小是依…

c语言中声明的问题【求个关注!】

文章目录 1 变量的声明与定义(1)定义与声明的区别:(2)为什么要区分定义与声明?(3)extern是什么 ?(4)举例: 2 函数的声明:函数声明的格…

前端面试问题汇总 - 其他问题

1. 一个好的产品有哪些特性? 解决问题: 优秀的产品应该能够解决用户的真实问题或满足用户的需求,提供有价值的解决方案。用户体验: 产品应该具有良好的用户体验,包括界面设计、交互设计、易用性等方面,让用户能够舒适…

使用Docker定时备份数据

文章目录 一、Docker镜像制作二、MySQL数据备份三、Minio数据备份四、数据跨服务器传输五、Nginx日志分割六、Docker启动七、Docker备份日志 一、Docker镜像制作 镜像制作目录 mc下载地址 - rsyncd.conf # https://download.samba.org/pub/rsync/rsyncd.conf.5port 873 uid …

共享内存和Pytorch中的Dataloader结合

dataloader中通常使用num_workers来指定多线程来进行数据的读取。可以使用共享内存进行加速。 代码地址:https://github.com/POSTECH-CVLab/point-transformer/blob/master/util/s3dis.py 文章目录 1. 共享内存和dataloader结合1.1 在init中把所有的data存储到共享内…

Qt控件---布局管理类

文章目录 QVBoxLayout(垂直布局)QHBoxLayout(水平布局)QGridLayout(网格布局)拉伸 QFormLayout(表单布局)QSpacerItem(空白) QVBoxLayout(垂直布局…

Apache Doris 基于 Job Scheduler 实现秒级触发任务调度能力

作者|SelectDB 技术团队 在数据管理愈加精细化的需求背景下,定时调度在其中扮演着重要的角色。它通常被应用于以下场景: 定期数据更新,如周期性数据导入和 ETL 操作,减少人工干预,提高数据处理的效率和准…

【王道数据结构笔记】顺序表的静态分配代码分析

🎈个人主页:豌豆射手^ 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏:数据结构 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进…

2024-04-08

作业要求: 1> 思维导图 2>使用手动连接,将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中,在自定义的槽函数中调用关闭函数 将登录按钮使用qt4版本的连接到自定义的槽函数中,在槽函数中判断ui界面上输入的账号是否…

攻防世界05view_source

鼠标右键无法查看源代码,但是可以直接F12进行查看 但是没有办法复制,可以在地址前面加上view-source 这时候就可以复制了 知识点1:view-source协议-查看源码 view-source是一种协议,早期基本上每个浏览器都支持这个协议。后来Mi…

C语言基础(四)

C语言基础 一维数组数组初始化全部初始化部分初始化数组的默认值冒泡排序 字符数组 二维数组初始化行数是否可省略列数是否可以省略部分初始化 访问二维字符数组 函数分类库函数自定义函数调用自定义函数函数声明 一维数组 概念&#xff1a;一组数据类型相同的元素的集合 <…

算法中二分搜索详解

文章目录 在有序数组中找num是否存在实现思路实现代码(里面运用了对数器)在有序数组中找>num的最左位置实现思路代码实现 在有序数组中找<num的最右位置实现思路实现代码 二分搜索不一定发生在有序数组上(比如寻找峰值问题)题目描述实现思路实现代码 在有序数组中找num是…

无人机巡检技术革命性变革光伏电站运维管理

在中国广袤的大地上&#xff0c;光伏电站如雨后春笋般崛起&#xff0c;晶体硅组件板在阳光下熠熠生辉&#xff0c;为人们带来了源源不断的绿色能源。然而&#xff0c;随着光伏产业的迅猛发展&#xff0c;电站运维管理面临着前所未有的挑战。而无人机巡检技术的引入&#xff0c;…

Kotlin 面试题

lifecycleScope.launchWhenResumed launchWhenResumed是一个扩展函数,它是LifecycleCoroutineScope的一部分,并且它是在Android的Lifecycle库中引入的。 这个函数的主要目的是在Lifecycle的对应组件(通常是Activity或Fragment)处于“resumed”状态时启动协程。 public fun …