【前端工程化面试题】使用 webpack 来优化前端性能/ webpack的功能

这个题目实际上就是来回答 webpack 是干啥的,你对webpack的理解,都是一个问题。

(1)对 webpack 的理解

webpack 为啥提出 + webpack 是啥 + webpack 的主要功能

前端开发通常是基于模块化的,为了提高开发效率,webpack 是一个基于模块的构建工具,是一个用于 js 应用程序的静态模块打包工具。

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具,它能够将多个 JavaScript 文件打包成一个或多个文件,以及将各种资源(如样式表、图片等)转换成代码。通过合理配置,可以借助 Webpack 来优化前端性能。以下是一些优化前端性能的常见方法:

静态模块是指开发阶段,可以被 webpack 引用的资源

(2)webpack 的主要功能有

  1. 模块打包:webpack 将项目中的各种模块、文件,以及它们之间的依赖关系打包成静态资源文件,供浏览器使用
  2. 加载器【loader】:webpack 支持使用加载器来处理非js文件,如将es6/7代码转换成es5【babel-loader】、处理css 前缀【postcss-loader】等
  3. 插件系统【plugin】:webpack 有丰富的插件系统,可以实现代码压缩、文件合并、代码分割、资源优化等功能。
  4. 开发服务器:webpack 提供开发服务器,在开发过程中提供实时的热更新功能
  5. 自动化构建:可以通过配置文件来定义构建任务,实现自动化构建。
  6. 支持多种模块化规范:cjs、amd、es6
  7. 代码优化:使用插件可以实现代码压缩、去除无用代码、提取公共代码等

(3)webpack 优化性能

重点,webpack 的这些优化

  1. 都下载配置文件的 optimization 属性中
  2. 都使用插件 plugin 进行优化,处理压缩图片使用的是loader
  1. 代码拆分:webpack 支持将代码分成多个 bundle,使应用程序可以按需加载,或并行加载这些文件,提高页面加载速度
    1. 使用 【splitChunksPlugin】,该插件webpack 已经默认安装和集成,可以直接配置使用
  2. 内联 chunk
    1. 使用【inline-chunk-html-plugin】插件将一些 chunk 的模块内联到 html
  3. 懒加载:结合代码分割,可以将不同页面或组件的代码分割成独立的文件,按需加在,减少初始化加载时间,提升页面响应速度。
  4. 代码压缩 :js/css/html 代码都
    1. 【terser-webpack-plugin】 js 压缩丑化js
    2. 【css-minimizer-webpack-plugin】css,去除无用空格等
    3. 【html-webpack-plugin】html,配置minify 属性,实际会使用另一个插件html-minifier-terse
  5. 文件大小压缩:对文件大小进行压缩,减少 http 传输中的宽带损耗
    1. 图片压缩:使用【image-webpack-loader】注意这个是 loader
    2. 对js/css等压缩:使用【compression-webpack-plugin】
  6. Tree Shaking:  特性来剔除未使用的代码,减少打包后文件的大小
    1. js 的有两种方案
      1. usedExports:true,通过标记某些函数是否被使用,之后通过 terser /ˈtersər来进行优化【这个terser 就是上面上到的压缩js的插件terser-webpack-plugin】
      2. sideEffects: false,跳过整个模块/文件,直接查看该文件是否有副作用
    2. css Tree Shaking: 使用【purgecss-plugin-webpack】

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

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

相关文章

MATLAB知识点:datasample函数(★★☆☆☆)随机抽样的函数,能对矩阵数据进行随机抽样

讲解视频:可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇(数学建模清风主讲,适合零基础同学观看)_哔哩哔哩_bilibili 节选自第3章:课后习题讲解中拓展的函数 在讲解第三…

数据类型与变量

目录 作业回顾 有关JDK, JRE, JVM三者: 判断题 新课学习 字面常量 数据类型 变量 整型变量 长整型变量 短整型变量 字节型变量 浮点型变量 字符型变量 布尔型变量 类型转换 自动类型转换(隐式) 强制类型转换(显式…

Navicat安装使用连接MySQL

目录 安装登录MySQL登录MySQL用Navicat连接MySQL 安装 选择“我同意”,点击下一步。 选择安装的目标文件夹,点击下一步。 点击下一步。 点击下一步。 点击安装。 软件安装需要一些时间,请耐心等待 点击“完成”。 注册 输入 密钥&#x…

Crypto-RSA3

题目:(BUUCTF在线评测 (buuoj.cn)) 共模攻击 ​ 前提:有两组及以上的RSA加密过程,而且其中两次的m和n都是相同的,那么就可以在不计算出d而直接计算出m的值。 ​ 设模数为n,两个用户的公钥分别为…

全栈笔记_浏览器扩展篇(manifest.json文件介绍)

manifest.json介绍 是web扩展技术必不可少的插件配置文件,放在根目录作用: 指定插件的基本信息 name:名称manifest_version:manifest.json文件的版本号,可以写2或3version:版本description:描述定义插件的行为: browser_action:添加一个操作按钮到浏览器工具栏,点击按…

LeetCode 0103.二叉树的锯齿形层序遍历:层序遍历 + 适时翻转

【LetMeFly】103.二叉树的锯齿形层序遍历:层序遍历 适时翻转 力扣题目链接:https://leetcode.cn/problems/binary-tree-zigzag-level-order-traversal/ 给你二叉树的根节点 root ,返回其节点值的 锯齿形层序遍历 。(即先从左往…

关于C++中的深拷贝

说到深拷贝,是相对于浅拷贝而言的。弄清了浅拷贝,深拷贝也就不言自明了。对C初学者而言,所谓浅拷贝在编写程序过程中往往是无感的。我们一般在写一个类时,多数情况我们只是写了成员变量、成员函数,有时为了赋初值方便&…

Java与JavaScript同源不同性

Java是目前编程领域使用非常广泛的编程语言,相较于JavaScript,Java更被人们熟知。很多Java程序员想学门脚本语言,一看JavaScript和Java这么像,很有亲切感,那干脆就学它了,这也间接的帮助了JavaScript的发展…

HTML | DOM | 网页前端 | 常见HTML标签总结

文章目录 1.前端开发简单分类2.前端开发环境配置3.HTML的简单介绍4.常用的HTML标签介绍 1.前端开发简单分类 前端开发,这里是一个广义的概念,不单指网页开发,它的常见分类 网页开发:前端开发的主要领域,使用HTML、CS…

OpenCV中的边缘检测技术及实现

介绍: 边缘检测是计算机视觉中非常重要的技术之一。它用于有效地识别图像中的边缘和轮廓,对于图像分析和目标检测任务至关重要。OpenCV提供了多种边缘检测技术的实现,本博客将介绍其中的两种常用方法:Canny边缘检测和Sobel边缘检测。 理论介…

【C语言】(25)文件包含include

#include是C语言中的预处理指令之一,用于在当前文件中包含另一个文件的内容。用于模块化和代码重用的基本机制。合理使用#include可以使代码结构更加清晰,易于管理和维护。 #include主要用于包含标准库头文件或自定义头文件。 两种形式的#include #in…

C语言程序设计(第四版)—习题7程序设计题

目录 1.选择法排序。 2.求一批整数中出现最多的数字。 3.判断上三角矩阵。 4.求矩阵各行元素之和。 5.求鞍点。 6.统计大写辅音字母。 7.字符串替换。 8.字符串转换成十进制整数。 1.选择法排序。 输入一个正整数n(1<n≤10)&#xf…

简易绘图软件(水一期)

哈哈&#xff01; 1、编写代码&#xff1a; 代码&#xff1a; main: #include <graphics.h> #include <music.h> #include <heker.h> #pragma comment( linker, "/subsystem:\"windows\" /entry:\"mainCRTStartup\"" )using…

在数组中插入元素

问题&#xff1a;假设有一个数组{1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5}&#xff0c;如果我们要在3之后插入一个数&#xff08;520&#xff09;&#xff0c;这该怎么办呢&#xff1f; 思路&#xff1a;要想在以元素3之后插入一个元素&#xff0c;我们先要做…

25天物理探索旅程 - 第四天:光的奇妙旅程揭秘

第四天&#xff0c;我们的科普探险队将踏上一段非凡的旅程&#xff0c;目标是揭开光——这位宇宙间最具魔法特质的信使的秘密面纱。今天&#xff0c;我们将以一种轻松愉快、幽默风趣的方式探讨光的本质&#xff0c;像看一场生动有趣的魔术表演般&#xff0c;领略光那波粒二象性…

react中如何做到中断diff过程和恢复

workLoop是 实现时间切片 和 可中断渲染的核心&#xff0c;简要说明如下&#xff1a; // 并发任务的入口function workLoopConcurrent() {// Perform work until Scheduler asks us to yield// 有任务 & 是否需要中断while (workInProgress ! null && !shouldYiel…

linux系统zabbix工具监控web页面

web页面监控 内建key介绍浏览器配置浏览器页面查看方式 监控指定的站点的资源下载速度&#xff0c;及页面响应时间&#xff0c;还有响应代码&#xff1b; web Scenario&#xff1a; web场景&#xff08;站点&#xff09;web page &#xff1a;web页面&#xff0c;一个场景有多…

二分算法01

二分算法01 1. H指数II2. 使结果不超过阈值的最小除数3. 完成旅途的最少时间 1. H指数II 给你一个整数数组 citations &#xff0c;其中 citations[i] 表示研究者的第 i 篇论文被引用的次数&#xff0c;citations 已经按照 升序排列 。计算并返回该研究者的 h 指数。 h 指数的…

目标服务器存在CDN

CDN 即内容分发网络&#xff0c;主要解决因传输距离和不同运营商节点造成的网络速 度性能低下的问题。说得简单点&#xff0c;就是一组在不同运营商之间的对接节点上的高速缓存 服务器&#xff0c;把用户经常访问的静态数据资源(例如静态的html、css、js图片等文件)直 接缓存到…

10-通用类型、特质和生命周期

上一篇&#xff1a; 09-错误处理 每种编程语言都有有效处理概念重复的工具。在 Rust 中&#xff0c;泛型就是这样一种工具&#xff1a;具体类型或其他属性的抽象替身。我们可以表达泛型的行为或它们与其他泛型的关系&#xff0c;而不需要知道在编译和运行代码时它们的位置。 函…