当前位置: 首页 > news >正文

【前端工程化面试题】使用 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】

相关文章:

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

这个题目实际上就是来回答 webpack 是干啥的,你对webpack的理解,都是一个问题。 (1)对 webpack 的理解 webpack 为啥提出 webpack 是啥 webpack 的主要功能 前端开发通常是基于模块化的,为了提高开发效率&#xff0…...

思迈特再获国家权威认证:代码自主率98.78%

日前,思迈特软件自主研发的商业智能与数据分析软件(Smartbi Insight)通过中国赛宝实验室(工业和信息化部电子第五研究所)代码扫描测试,Smartbi Insight V11版本扫描测得代码自主率为98.78%的好成绩&#xf…...

JavaScript排序

直接看代码 <table border"1" cellspacing"0"><thead class"tou"><tr><td>选择按钮</td><td>汽车编号</td><td>汽车图片</td><td>汽车系列名称</td><td>汽车能源</…...

【读书笔记】ICS设备及应用攻击(一)

工控系统通常是由互联设备所构成的大型复杂系统&#xff0c;这些设备包括类似于人机界面&#xff08;HMI&#xff09;、PLC、传感器、执行器以及其他使用协商好的协议进行相互通信的设备。所有交互背后的驱动力都是软件&#xff0c;软件为工控系统中几乎所有部分的运行提供支撑…...

网络原理(HTTP篇)

网络原理HTTP 前言HTTPHTTP的工作流程抓包工具抓取HTTP报文HTTP报文格式 请求报文具体细节首行URLURL的基本格式URL encode 方法 报头(header)HostContent-Length 和 Content-TypeUser-Agent&#xff08;UA&#xff09;RefererCookie&#xff08;重要&#xff09; 前言 如图&a…...

关于油封密封件你了解多少?

油封也称为轴封或旋转轴封&#xff0c;旨在防止设备中的润滑剂泄漏&#xff0c;并防止外部污染物进入机械。它们通常用于泵和电机等旋转设备&#xff0c;在固定部件和移动部件之间提供密封界面。 油封的有效性很大程度上取决于其材料。不同的材料具有不同程度的耐热性、耐压性…...

Leetcode 72 编辑距离

题意理解&#xff1a; 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符 删除一个字符 替换一个字符 将word1转换为word2,可以进行三种操作&#xff1a;增、删、改&am…...

羊大师揭秘,如何挑选出好牧场的奶羊,该怎么看

羊大师揭秘&#xff0c;如何挑选出好牧场的奶羊&#xff0c;该怎么看 了解牧场的管理和环境&#xff1a;好的牧场应该有规范的管理制度&#xff0c;环境整洁&#xff0c;草场茂盛&#xff0c;为奶羊提供了充足的食物和良好的生活环境。在这样的牧场中&#xff0c;奶羊能够得到…...

MySQL数据库基础(八):DML数据操作语言

文章目录 DML数据操作语言 一、DML包括哪些SQL语句 二、数据的增删改&#xff08;重点&#xff09; 1、数据的增加操作 2、数据的修改操作 3、数据的删除操作 DML数据操作语言 一、DML包括哪些SQL语句 insert插入、update更新、delete删除 二、数据的增删改&#xff08…...

(09)Hive——CTE 公共表达式

目录 1.语法 2. 使用场景 select语句 chaining CTEs 链式 union语句 insert into 语句 create table as 语句 前言 Common Table Expressions&#xff08;CTE&#xff09;&#xff1a;公共表达式是一个临时的结果集&#xff0c;该结果集是从with子句中指定的查询派生而来…...

Spring 用法学习总结(四)之 JdbcTemplate 连接数据库

&#x1f409;目录 9 JdbcTemplate 9 JdbcTemplate Spring 框架对 JDBC 进行了封装&#xff0c;使用 JdbcTemplate 方便实现对数据库操作 相关包&#xff1a; 百度网盘链接https://pan.baidu.com/s/1Gw1l6VKc-p4gdqDyD626cg?pwd6666 创建properties配置文件 &#x1f4a5;注意…...

第 385 场 LeetCode 周赛题解

A 统计前后缀下标对 I 模拟 class Solution { public:int countPrefixSuffixPairs(vector<string> &words) {int n words.size();int res 0;for (int i 0; i < n; i)for (int j i 1; j < n; j)if (words[i].size() < words[j].size()) {int li words[…...

什么是RabbitMQ?

一、引言 RabbitMQ是一个开源的消息代理软件&#xff0c;用于在分布式系统中传递消息。它实现了高级消息队列协议&#xff08;AMQP&#xff09;&#xff0c;提供了一种可靠的、强大的、灵活的消息传递机制&#xff0c;使得不同应用程序或组件之间可以轻松地进行通信。 二、概念…...

JWT登录验证前后端设计与实现笔记

设计内容 前端 配置全局前置路由守卫axios拦截器登录页面和主页 后端 JWT的封装登录接口中间件放行mysql数据库的连接 详细设计 路由设计 配置全局前置守卫&#xff0c;如果访问的是登录页面则放行&#xff0c;不是则进入判断是否有token&#xff0c;没有则拦截回到登录…...

自定义类型详解 ----结构体,位段,枚举,联合

目录 结构体 1.不完全声明 2.结构体的自引用 3.定义与初始化 4.结构体内存对齐与结构体类型的大小 结构体嵌套问题 位段 1.什么是位段&#xff1f; 2.位段的内存分配 枚举 1.枚举类型的定义 2.枚举的优点 联合&#xff08;共同体&#xff09; 1.联合体类型的声明以…...

VueCLI核心知识综合案例TodoList

目录 1 拿到一个功能模块首先需要拆分组件&#xff1a; 2 使用组件实现静态页面的效果 3 分析数据保存在哪个组件 4 实现添加数据 5 实现复选框勾选 6 实现数据的删除 7 实现底部组件中数据的统计 8 实现勾选全部的小复选框来实现大复选框的勾选 9 实现勾选大复选框来…...

关于cuda路径问题

问题&#xff1a;Could not load dynamic library ‘libcudart.so.11.0’ 原因&#xff1a;调用系统环境下的cuda但系统环境没有装cuda 解决&#xff1a; 1.在系统环境装cuda&#xff0c;但如果每权限就不好操作&#xff1b; 2.用虚拟环境装好的cuda路径丢给环境变量 暂时性&am…...

六、Spring/Spring Boot整合ActiveMQ

Spring/Spring Boot整合ActiveMQ 一、Spring整合ActiveMQ1.pom.xml2.Queue - 队列2.1 applicationContext.xml2.2 生产者2.3 消费者 3.Topic - 主题3.1 applicationContext.xml3.2 生产者3.3 消费者 4.消费者 - 监听器4.1 编写监听器类4.2 配置监听器4.3 生产者消费者一体 二、…...

树莓派4B(Raspberry Pi 4B)使用docker搭建springBoot/springCloud服务

树莓派4B&#xff08;Raspberry Pi 4B&#xff09;使用docker搭建springBoot/springCloud服务 前提&#xff1a;本文基于Ubuntu&#xff0c;Java8&#xff0c;SpringBoot 2.6.13讲解 准备工作 准备SpringBoot/SpringCloud项目jar包 用 maven 打包springBoot/springCloud项目&…...

数据库设计、JDBC、数据库连接池

数据库设计 数据库设计概念 数据库设计就是根据业务 系统的具体需求&#xff0c;结合我们所选用的DBMS,为这个业务系统构造出最优的数据存储模型。建立数据库中的表结构以及表与表之间的关联关系的过程。有哪些表?表里有哪些字段?表和表之间有什么关系? 数据库设计的步骤…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

动态规划-1035.不相交的线-力扣(LeetCode)

一、题目解析 光看题目要求和例图&#xff0c;感觉这题好麻烦&#xff0c;直线不能相交啊&#xff0c;每个数字只属于一条连线啊等等&#xff0c;但我们结合题目所给的信息和例图的内容&#xff0c;这不就是最长公共子序列吗&#xff1f;&#xff0c;我们把最长公共子序列连线起…...