建设银行银行信用卡中心网站/项目推广方案

建设银行银行信用卡中心网站,项目推广方案,wordpress导航位置,网站做充值和提现​ 1. 对 webpack 的理解?解决了什么问题? Webpack 是前端工程化领域的核心工具,其核心定位是模块打包器(Module Bundler),通过将各类资源(JS、CSS、图片等)视为模块并进行智能整合…

1. 对 webpack 的理解?解决了什么问题?

Webpack 是前端工程化领域的核心工具,其核心定位是模块打包器(Module Bundler),通过将各类资源(JS、CSS、图片等)视为模块并进行智能整合,解决了传统前端开发中的多维度问题

解决问题:
1. 模块化开发与依赖管理

  • 传统痛点:早期前端依赖全局变量和手动< script>标签管理代码,易命名冲突和依赖混乱
  • Webpack 方案: 支持 ES Module、CommonJS等模块化语法,自动构建依赖图,实现模块的精准加载与隔离

2. 多类型资源整合

  • 传统痛点:CSS 、图片等 非 JS 资源需单独处理,缺乏统一管理
  • Webpack 方案: 通过 Loader (如 css-loader、file-loader)将非 JS资源转换为 JS可识别模块,实现"一切皆模块"

3.性能优化与工程化

  • 传统痛点:全量打包导致首屏加载慢,代码冗余
  • Webpack 方案
    • Code Splitting:按需分割代码块(如路由级拆分),减少首屏体积
    • Tree Shaking:静态分析剔除未使用的代码,减少打包体积
    • 缓存优化:文件名哈希策略(文件指纹),实现长效缓存

4.开发体验提升

  • 传统痛点:手动刷新、调试困难
  • Webpack方案:
  • HMR(热模块替换):局部更新模块、保留应用状态
  • DevServer:内置开发服务器,支持代理、Mock数据

2. webpack 构建流程?

Webpack 的构建流程可分为 三大阶段,涵盖 10+ 关键步骤

  1. 初始化阶段

    • 读取配置:合并命令行参数与 webpack.config.js,确定入口 (Entry)、输出(Output)等
    • 创建 Compiler:全局单例对象,管理生命周期和插件调度
    • 注册插件:调用各插件的 apply 方法,挂载到 Compiler 钩子(如 beforeRun、compile)
  2. 编译构建阶段

    • 模块解析:从Entry 出发,递归解析依赖,生成 Module 对象
    • Loader 转换:调用匹配的 loader 处理文件内容
    • AST 分析: 使用 acorn 生成抽象语法树,提取依赖关系
  3. 输出阶段

    • Chunk 生成:根据依赖图将 Module合并为 Chunk (如按入口或者动态导入拆分)
    • 资源优化:执行插件(如 TerserPlugin)压缩代码,应用 Tree Shaking
    • 文件写入:将 Chunk 转换为最终文件,输出至 dist 目录

3. Webpack 中常见的 Loader ?解决了什么问题?

Loader 是 Webpack 的核心模块处理器,用于将非 Javascript 文件(如 css、图片、字体等)转换为 Webpack 可识别的有效模块,解决如下关键问题:

  1. 模块化兼容:将各类资源统一视为模块,支持 import/require 语法引入
  2. 资源转换:编译预处理语言(如 Sass、Typescript )、压缩图片、转译 ES6+ 语法等,扩展 Webpack 处理能力
  3. 性能优化:减少 HTTP 请求(如 Base64 内联小文件)、代码分割 与 Tree Shaking 支持
    Loader 本质是个函数。

4. Webpack 中常见的 Plugin ? 解决了什么问题?

Plugin 通过【基于tapable】扩展构建流程的生命周期钩子,解决了以下核心问题:
- 自动化资源管理:如 HTML 生成、CSS提取、静态文件复制等;
- 性能优化: 代码压缩、分包、缓存控制
- 开发体验增强:环境变量注入、构建进度反馈
- 深度分析:可视化报告辅助优化决策

赋予 Webpack 各种灵活的功能,例如打包优化、资源管理、环境变量注入等,他们会运行在 Webpack 的不同阶段(钩子/ 生命周期),贯穿了 webpack 整个编译周期,目的在于解决 loader 无法实现的其他事。
Plugin 本质是一个类。

5. Webpack 说说 Loader 和 Plugin 的区别? 编写 Loader 、Plugin 思路?

Loader

  • 本质是文件转换器,用于处理单个文件。Webpack原生只能解析 JavaScript ,而Loader 负责将其他类型文件(如 CSS、图片、Typescript)转换为 Webpack 可识别的模块,例如 将ES6+ 转换为 ES5、将 CSS注入到 HTML 的< style>标签等;
  • 在模块加载阶段运行,配置在 module.rules 中,通过 test 匹配文件类型,use 指定处理顺序(从右到左执行)。例如处理 CSS 时的顺序为 css-loader => style.loader
    Plugin
  • 本质是功能扩展器,作用域整个构建流程。Plugin 通过监听 Webpack 生命周期中的事件(如编译完成、资源输出),实现复杂任务,例如代码压缩、生成 HTML文件、分析打包体积等
  • 贯穿 Webpack 整个编译周期,配置在 Plugin 数组中,需实例化并注册到 Webpack 的钩子(Hooks)上。例如 HtmlWebpackPlugin 在构建完成后生成 HTML。

编写思路:

  • loader:导出一个函数,接收源文件内容,返回处理后的内容,可以时同步返回(直接返回)或异步(通过 this.async 回调)
  • Plugin: 导出一个类,需定义 apply 方法,通过 compiler 和 compilation 对象访问 Webpack 内部数据,并绑定生命周期钩子(如 emit、done)

6. Webpack 的热更新是如何做到的? 原理是什么?

HMR ( Hot Module Replacement )

原理:

通过 webpack-dev-server 创建两个服务器: 提供静态资源的服务( Express )和 Socket 服务
Express server 负责直接提供静态资源的服务 ( 打包后资源直接被浏览器请求和解析)
Socket server 是一个 websocket 的长连接,双方可以互相通信
当 socket server监听到对应的模块发生变化时,会生成两个文件 .json ( manifest 文件 ) 和 .js ( unpdate chunk )
通过长连接,socket server 可以直接将这两个文件主动发送给客户端 ( 浏览器)
浏览器拿到两个新的文件后,通过 HMR runtime 机制,加载这两个文件,并且针对修改的模块进行更新

7. Webpack proxy 工作原理? 为什么能跨域?

proxy 工作原理: 实质利用 http-proxy-middleware 这个 http 代理中间件,实现请求转发给其他服务器

跨域:( 服务器和服务器之间请求数据并不会存在跨域行为,跨域行为是浏览器安全策略限制 )

在开发阶段, webpack-dev-server 会启动一个本地开发服务器,所以我们的应用在开发阶段是独立运行在 localhost 的一个端口上,而后端服务器有事运行在另外一个地址上。所以在开发阶段中,由于浏览器同源策略的原因,当本地访问后端就会出现跨域请求。

解决跨域: 当本地发送请求的时候,代理服务器响应该请求,并将请求转发到目标服务器上,目标服务器响应数据后再将数据返回给代理服务器,最终再由代理服务器将数据响应给本地。

8. 如何借助 Webpack 来优化前端性能

优化方向核心策略工具/配置
代码体积Tree Shaking、代码分割、压缩TerserPlugin、SplitChunks
加载性能懒加载、CDN、预加载import()、externals、preload
构建效率缓存、多进程、Webpack 5 升级cache: filesystem、thread-loader
长期缓存Content Hash、文件系统缓存[contenthash]、Webpack 5 缓存配置

9.如何提高 Webpack 的构建速度?

主要可以从优化搜索时间、缩小文件搜索范围、减少不必要的编译等方面入手

优化 loader 配置 ( 通过配置 include、exclude、test属性来匹配文 )
合理使用 resolve.extensions
优化 resolve.modules ( 第三方模块的绝对路径,以减少寻找 )
优化 resolve.alias ( alias给一些常用的路径起一个别名,例如:@)
使用 DLLPlugin 插件
使用 cache-loader
terser 启动多线程
合理使用 sourceMap

10. 与 Webpack 类似的工具还有哪些

Rollup ( Vue、React 和 Three.js )
Parcel ( 零配置、傻瓜式 )
Snowpack ( 闪电般快速,较为复杂、Webpack 和 Parcel 的替代方案)
Webpack 的优势:

智能解析: 对 CommonJS、AMD、ES6 的语法做了兼容
万物模块: 对 js、css、图片等资源文件都支持打包
开箱即用: 集成 HRM、Tree-Shaking 等功能
代码分割: 可以将代码切割成不同的 chunk,实现按需加载,降低了初始化时间
插件系统: 具有强大的 Plugin 接口,具有更好的灵活性和扩展性
易于调试:支持 ScoureUrls 和 ScoureMap
快速运行: Webpack 使用异步 IO 并具有多级缓存,这使得 Webpack 很快且在增量编译上更加快
生态环境好:社区更丰富,出现问题更容易解决

11. webpack 常用字段

main:定义了 npm 包的入口文件
mudule: 定义了 npm 包的 ESM 规范的入口文件
browser: 定义了 npm 包在 browser 环境下的入口文件

12. Webpack 常用插件

  1. webpack、webpack-cli 、webpack-dev-server
  2. html-webpack-plugin ( 打包 html 文件 )
  3. clean-webpack-plugin ( 打包前删除输出目录 )
  4. webpack-merge ( 合并 webpack 配置)
  5. optimize-css-assets-webpack-plugin ( css 压缩 )
  6. style-loader ( 将 css 插入到 html )
  7. postcss-loader ( 处理 css 的兼容性 ) 和 autoprefixer 一起用
  8. file-loader ( 处理图片文件 )
  9. url-loader ( 将图片转换成 base64 格式 )
  10. mini-css-extract-plugin ( 将 css 单独打包成一个文件 )
  11. terser-webpack-plugin ( 压缩 JS 代码 )
  12. @babel/perset-env ( 处理 js 的浏览器兼容问题 )

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

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

相关文章

[Hello-CTF]RCE-Labs超详细WP-Level13Level14(PHP下的0/1构造RCE命令简单的字数限制RCE)

Level 13 源码分析 这题又回到了 PHP重点关注preg_match("/[A-Za-z0-9\"%*,-.\/:;>?[\]^|]/", $cmd)禁用了所有数字, 并且回到了 PHP, 没办法用上一关的方法进行绕过但是比起上一关, 给我们少绕过了 &, ~, _似乎有其他方法 解题分析 利用 $(()) 和 …

Qt 控件概述 QWdiget 1.1

目录 qrc机制 qrc使用 1.在项目中创建一个 qrc 文件 2.将图片导入到qrc文件中 windowOpacity&#xff1a; cursor 光标 cursor类型 自定义Cursor font tooltip focusPolicy styleSheet qrc机制 之前提到使用相对路径的方法来存放资源&#xff0c;还有一种更好的方式…

【eNSP实战】将路由器配置为DHCP服务器

拓图 要求&#xff1a; 为 office100 和 office200 分别配置地址池 AR1接口配置 interface GigabitEthernet0/0/0ip address 192.168.100.1 255.255.255.0 # interface GigabitEthernet0/0/1ip address 192.168.200.1 255.255.255.0 AR1路由器上创建office100地址池 [AR1…

数据结构——顺序表seqlist

前言&#xff1a;大家好&#x1f60d;&#xff0c;本文主要介绍了数据结构——顺序表部分的内容 目录 一、线性表的定义 二、线性表的基本操作 三.顺序表 1.定义 2. 存储结构 3. 特点 四 顺序表操作 4.1初始化 4.2 插入 4.2.1头插 4.2.2 尾插 4.2.3 按位置插 4.3 …

OSPF | LSDB 链路状态数据库 / SPF 算法 / 实验

注&#xff1a;本文为 “OSPF | LSDB / SPF ” 相关文章合辑。 LSDB 和 SPF 算法 潇湘浪子的蹋马骨汤 发布 2019-02-15 23:58:46 1. 链路状态数据库 (LSDB) 链路状态协议除了执行洪泛扩散链路状态通告&#xff08;LSA&#xff09;以及发现邻居等任务外&#xff0c;其第三个任…

前端---CSS(前端三剑客)

1.基本语法规范 选择器 {⼀条/N条声明} • 选择器决定针对谁修改 (找谁) • 声明决定修改啥. (⼲啥) • 声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值 比如&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta…

【C++】 —— 笔试刷题day_6

刷题day_6&#xff0c;继续加油哇&#xff01; 今天这三道题全是高精度算法 一、大数加法 题目链接&#xff1a;大数加法 题目解析与解题思路 OK&#xff0c;这道题题目描述很简单&#xff0c;就是给我们两个字符串形式的数字&#xff0c;让我们计算这两个数字的和 看题目我…

todolist docker 小工具

参考链接 前排提示 没有中文&#xff0c;可使用浏览器 翻译 前提 安装docker安装docker-compose 下载仓库 git clone https://github.com/JordanKnott/taskcafe进行安装 cd taskcafe docker-compose -p taskcafe up -d服务启动后会监听在 3333 端口上&#xff0c;通过浏览器…

Unity--GPT-SoVITS接入、处理GPTAPI的SSE响应流

GPT-SoVITS GPT-SoVITS- v2&#xff08;v3也可以&#xff0c;两者对模型文件具有兼容&#xff09; 点击后 会进入新的游览器网页 ----- 看了一圈&#xff0c;发现主要问题集中在模型的训练很需要CPU&#xff0c;也就是模型的制作上&#xff0c;问题很多&#xff0c;如果有现有…

《TypeScript 快速上手:类型、编译与严格模式的简明教程》

一、TypeScript介绍 在引入编程社区 20 多年后&#xff0c;JavaScript 现在已成为有史以来应用最广泛的跨平台语言之一。JavaScript 最初是一种用于向网页添加微不足道的交互性的小型脚本语言&#xff0c;现已发展成为各种规模的前端和后端应 用程序的首选语言。虽然用 JavaSc…

ROS2 系统架构

1.操作系统层 ros2是基于Linux、Windows、macOS系统建立的&#xff0c;这一层为ros2提供了各种基础的硬件驱动&#xff0c;比如网卡驱动&#xff0c;常用USB驱动和常用摄像头驱动等。 2.DDS实现层 ros2的核心通信是采用第三方的通信组件来实现的&#xff0c;这个第三方就是数…

【HTML】二、列表、表格

文章目录 1、列表1.1 无序列表1.2 有序列表1.3 定义列表 2、表格2.1 定义2.2 表格结构标签2.3 合并单元格 1、列表 列表分为&#xff1a; 无序列表有序列表定义列表&#xff1a;一个标题下有多个小分类 1.1 无序列表 ul嵌套li&#xff0c;ul是无序列表&#xff0c;li是列表…

redis zset基本介绍以及底层实现

ZSet&#xff08;Sorted Set&#xff09;有序集合 介绍 Redis 中的有序集合(Sorted Set)是在集合(Set)的基础上,为每个成员关联了一个分数(score)。这个分数可以用来对集合中的成员进行排序。 有序集合保留了集合不能有重复成员的特性&#xff08;成员不能重复&#xff0c;分值…

政策助力,3C 数码行业数字化起航

政策引领&#xff0c;数字经济浪潮来袭 在当今时代&#xff0c;数字经济已成为全球经济发展的核心驱动力&#xff0c;引领着新一轮科技革命和产业变革的潮流。我国深刻洞察这一发展趋势&#xff0c;大力推进数字化经济发展战略&#xff0c;为经济的高质量发展注入了强大动力。 …

IntelliJ IDEA 快捷键系列:重命名快捷键详解

目录 引言一、默认重命名快捷键1. Windows 系统‌2. Mac 系统‌ 二、操作步骤与技巧1. 精准选择重命名范围‌2. 智能过滤无关内容‌ 三、总结 引言 在代码重构中&#xff0c;‌重命名变量、类、方法‌ 是最常用的操作之一。正确使用快捷键可以极大提升开发效率。本文针对 ‌Ma…

文档搜索引擎

首先获取很多网页(爬虫->一个http客户端,发送http请求获取http响应结果(就是网站))(批量化的获取很多的页面) 再根据用户输入的查询词,在网页中进行查找 用户输入查询词之后,如何让查询词和当前这些网页进行匹配 ->使用倒排索引 倒排索引 1.文档: 每个待搜索的网页(被爬…

开源工具利器:Mermaid助力知识图谱可视化与分享

在现代 web 开发中&#xff0c;可视化工具对于展示流程、结构和数据关系至关重要。Mermaid 是一款强大的 JavaScript 工具&#xff0c;它使用基于 Markdown 的语法来呈现可定制的图表、图表和可视化。对于展示流程、结构和数据关系至关重要。通过简单的文本描述&#xff0c;你可…

【AI News | 20250316】每日AI进展

AI Repos 1、ReActMCP 将网络搜索能力集成到AI助手中的一个MCP服务&#xff1a;ReActMCP Web Search&#xff0c;相当于给AI装了个搜索引擎&#xff0c;可以实时查找最新的内容。它基于Exa API执行基本和高级网络搜索&#xff0c;高级搜索比如限制搜索的网站范围、指定日期范围…

【VUE】day04-组件的生命周期、组件之间的数据共享、ref引用、购物车案例

【VUE】day04-组件的生命周期、组件之间的数据共享、ref引用、购物车案例 1. 组件之间的关系2. 使用组件的三个步骤3. vue.components全局注册组件4. 自动生成右边标签插件5. 组件的props6. 结合v-bind使用自定义属性7. props的默认default值8. type值类型9. 组件之间的样式冲突…

量化交易学习笔记02:双均线策略

双均线策略示例 个股&#xff1a;中国平安 回测日期&#xff1a;2022-5-1至2023-5-1 短均线&#xff1a;5天 长无线&#xff1a;10天 代码&#xff1a; def initialize(context):# 初始化此策略# 设置我们要操作的股票池, 这里我们只操作一支股票# """标的&qu…