Something went wrong.

\n }\n return this.props.children\n }\n}\n...\n\n \n\n```\n\n**Vue**\n\nvue也有一个类似的生命周期来做这件事：`errorCaptured`\n\n```js\nVue.component('ErrorBoundary', {\n data: () => ({ error: null }),\n errorCaptured (err, vm, info) {\n this.error = `${err.stack}\\n\\nfound in ${info} of component`\n // 调用我们的SDK，上报错误信息\n insSDK.error(err,info)\n return false\n },\n render (h) {\n if (this.error) {\n return h('pre', { style: { color: 'red' }}, this.error)\n }\n return this.$slots.default[0]\n }\n})\n...\n\n \n\n```\n\n\n### 参考文档\n\nhttps://juejin.cn/post/7085679511290773534\n",{"_58":265,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/635/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/635/timeline",{"_58":268,"_60":61,"_62":269,"_64":270,"_66":271,"_68":272,"_70":273,"_72":274,"_74":275,"_76":276,"_78":277,"_111":278,"_131":132,"_133":24,"_134":-5,"_135":281,"_137":282,"_159":152,"_153":284,"_155":285,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":286,"_169":287,"_175":288,"_177":289,"_189":291,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/632","https://api.github.com/repos/pro-collection/interview-question/issues/632/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/632/comments","https://api.github.com/repos/pro-collection/interview-question/issues/632/events","https://github.com/pro-collection/interview-question/issues/632",1987850638,"I_kwDOJGDC6c52fDGO",632,"在前端应用如何进行权限设计？【热度: 329】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[279,280],{"_70":250,"_72":251,"_58":252,"_117":253,"_119":254,"_121":24,"_122":255},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":283,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-10T15:33:25Z","2023-11-10T15:33:26Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：权限设计\n\n在前端应用的权限设计中，以下是一些建议：\n\n### 角色与权限分离\n将用户的权限分为不同的角色，每个角色拥有特定的权限。\n这样可以简化权限管理，并且当需求变化时，只需要调整角色的权限，而不需要逐个修改用户的权限。\n\n**在角色与权限分离的设计中，可以按照以下几个步骤进行**\n\n1. 确定权限集合：首先，需要确定系统中所有的权限，包括操作、功能、资源等。可以根据系统需求、业务流程等确定权限的粒度和层次结构。\n\n2. 确定角色集合：根据系统的角色需求，确定不同的角色，例如管理员、普通用户、编辑等。每个角色代表一组权限的集合，可以根据业务需求进行划分。\n\n3. 分配权限给角色：将权限与角色进行关联，确定每个角色具备哪些权限。可以通过角色-权限的映射表或者通过角色组的方式进行管理。\n\n4. 用户与角色关联：将用户与角色进行关联，确定每个用户属于哪些角色。可以通过用户-角色的映射表或者通过用户组的方式进行管理。\n\n5. 权限验证：在系统中，根据用户的角色和权限配置进行权限验证。在用户进行操作或访问受限资源时，根据用户的角色与权限进行验证，决定是否允许执行相应的操作。\n\n\n### 功能级权限控制\n对于敏感操作或者需要权限控制的功能，需要在前端实现功能级的权限控制。\n通过在代码中判断用户是否拥有执行该功能的权限，来决定是否展示或者禁用相关功能。\n\n**功能级权限控制是指在系统中对用户进行细粒度的权限控制，即控制用户是否能够执行某个具体的功能或操作。**\n以下是功能级权限控制的设计步骤：\n\n1. 确定功能点：首先，需要明确系统中的各个功能点，例如新增、编辑、删除、查询等。将系统中的所有功能进行明确定义和分类。\n\n2. 定义权限：对于每个功能点，定义相应的权限。权限可以使用权限名或者权限码进行标识，例如新增权限可以使用\"add\"或者权限码\"001\"进行标识。\n\n3. 角色与权限关联：将权限与角色进行关联。确定每个角色具备哪些权限。可以使用角色-权限的映射表进行管理。\n\n4. 用户与角色关联：将用户与角色进行关联。确定每个用户属于哪些角色。可以使用用户-角色的映射表进行管理。\n\n5. 权限验证：在系统中，对用户进行权限验证。当用户进行某个功能操作时，根据用户的角色与权限进行验证，决定是否允许执行该操作。\n\n6. 权限控制界面：提供一个权限控制界面，用于管理角色与权限的关联。管理员可以通过该界面对角色的权限进行配置和管理。\n\n7. 动态权限控制：可以考虑将权限控制设计成动态的。即在系统运行时，可以根据用户角色的配置动态控制用户是否具备某个功能的权限。这样可以灵活地根据业务需求进行权限的调整。\n\n\n### 路由级权限控制\n\n对于不同的页面或路由，可以根据用户的角色或权限来进行权限控制。在前端路由中配置权限信息，当用户访问特定路由时，前端会检查用户是否具备访问该路由的权限。\n\n**前端路由级权限控制是指在前端页面中根据用户的权限配置，控制用户是否可以访问某个路由或者页面。**\n以下是前端路由级权限控制的设计方案：\n\n1. 定义路由表：首先，需要定义系统中的所有路由和对应的页面组件。将路由按照功能模块进行分类，方便后续的权限管理。\n\n2. 定义权限配置：对于每个路由或者页面，定义相应的权限配置。可以使用权限名或者权限码进行标识，例如\"add\"、\"edit\"等。可以将权限配置与路由表一起存放在一个配置文件中，或者存放在后端数据库中。\n\n3. 获取用户权限：在登录成功后，从后端获取当前用户的权限信息。可以将用户的权限信息存放在前端的状态管理库（如Vuex或Redux）中，以便在全局范围内进行访问。\n\n4. 路由守卫：使用前端路由守卫机制，在路由跳转前进行权限验证。在路由守卫中，根据当前用户的权限信息和路由配置进行判断，决定是否允许用户访问该路由。如果用户没有相应的权限，可以进行跳转到无权限提示页面或者其他处理方式。\n\n5. 权限控制组件：可以创建一个权限控制组件，在需要进行权限控制的路由组件上使用该组件进行包裹。该组件可以根据当前用户的权限和路由配置，动态显示或隐藏路由组件。\n\n6. 动态路由：对于一些有权限控制的路由，可以在用户登录时根据权限配置动态生成。根据用户的权限配置，过滤路由表，生成用户可以访问的路由列表，并将该列表添加到路由配置中。\n\n\n### 动态权限管理\n\n在前端应用中，可以实现动态权限管理，即在用户登录时从服务器获取用户的权限信息，并在前端进行缓存。这样可以保证用户权限的实时性，同时也便于后端对权限进行调整和管理。\n\n### UI级的权限控制\n\n对于某些敏感信息或操作，可以通过前端的界面设计来进行权限控制。例如，隐藏某些敏感字段或操作按钮，只对具有相应权限的用户可见或可操作。\n\n### 异常处理与安全验证\n\n在前端应用中，需要实现异常处理机制，当用户越权操作时，需要给予相应提示并记录日志。同时，对于敏感操作，需要进行二次验证，例如通过输入密码或短信验证码等方式进行安全验证。\n\n### 安全性考虑\n\n在设计前端应用的权限时，需要考虑安全性，例如防止跨站脚本攻击（XSS）、跨站请求伪造（CSRF）等攻击方式。可以采用合适的安全措施，如输入验证、加密传输等来保护应用的安全性。\n\n综上所述，前端应用的权限设计应该考虑角色与权限分离、功能级与路由级的权限控制、动态权限管理、UI级的权限控制、异常处理与安全验证以及安全性考虑等方面。通过合理的权限设计，可以确保系统的安全性和用户权限的灵活管理。\n",{"_58":290,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/632/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/632/timeline",{"_58":293,"_60":61,"_62":294,"_64":295,"_66":296,"_68":297,"_70":298,"_72":299,"_74":300,"_76":301,"_78":302,"_111":303,"_131":132,"_133":24,"_134":-5,"_135":312,"_137":313,"_159":152,"_153":315,"_155":315,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":316,"_169":317,"_175":318,"_177":319,"_189":321,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/630","https://api.github.com/repos/pro-collection/interview-question/issues/630/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/630/comments","https://api.github.com/repos/pro-collection/interview-question/issues/630/events","https://github.com/pro-collection/interview-question/issues/630",1987802263,"I_kwDOJGDC6c52e3SX",630,"[低代码] 代码平台一般渲染是如何设计的？【热度: 399】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[304,311],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","工程化","1d76db","web 项目工程化",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":217,"_68":218,"_62":219,"_70":220,"_72":221,"_74":222,"_76":223,"_122":224,"_147":314,"_149":226,"_151":152,"_131":132,"_153":227,"_155":228,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-10T15:06:06Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：代码平台渲染设计\n\n**渲染设计**\n\n渲染核心本质就是： [schema] + [组件] = [页面]\n\n### 整体架构如下\n\n![01](https://img.alicdn.com/imgextra/i1/O1CN01i4IiSR1cMtUFXaWQq_!!6000000003587-2-tps-1686-1062.png)\n\n- **协议层**：基于《低代码引擎搭建协议规范》产出的 Schema 作为我们的规范协议。\n- **能力层**：提供组件、区块、页面等渲染所需的核心能力，包括 Props 解析、样式注入、条件渲染等。\n- **适配层**：由于我们使用的运行时框架不是统一的，所以统一使用适配层将不同运行框架的差异部分，通过接口对外，让渲染层注册/适配对应所需的方法。能保障渲染层和能力层直接通过适配层连接起来，能起到独立可扩展的作用。\n- **渲染层**：提供核心的渲染方法，由于不同运行时框架提供的渲染方法是不同的，所以其通过适配层进行注入，只需要提供适配层所需的接口，即可实现渲染。\n- **应用层**：根据渲染层所提供的方法，可以应用到项目中，根据使用的方法和规模即可实现应用、页面、区块的渲染。\n\n\n### 设计模式渲染（Simulator）\n\n设计模式渲染就是将编排生成的《搭建协议》渲染成视图的过程，视图是可以交互的，所以必须要处理好内部数据流、生命周期、事件绑定、国际化等等。\n也称为画布的渲染，画布是 UI 编排的核心，它一般融合了页面的渲染以及组件/区块的拖拽、选择、快捷配置。 \n画布的渲染和预览模式的渲染的区别在于，画布的渲染和设计器之间是有交互的。\n所以在这里我们新增了一层 Simulator 作为设计器和渲染的连接器。 \nSimulator 是将设计器传入的 DocumentModel 和组件/库描述转成相应的 Schema 和组件类。再调用 Render 层完成渲染。我们这里介绍一下它提供的能力。\n\n![02](https://img.alicdn.com/imgextra/i2/O1CN017cYBAp1hvJKPUVLbx_!!6000000004339-2-tps-1500-864.png)\n\n- **Project**：位于顶层的 Project，保留了对所有文档模型的引用，用于管理应用级 Schema 的导入与导出。\n- **Document**：文档模型包括 Simulator 与数据模型两部分。Simulator 通过一份 Simulator Host 协议与数据模型层通信，达到画布上的 UI 操作驱动数据模型变化。通过多文档的设计及多 Tab 交互方式，能够实现同时设计多个页面，以及在一个浏览器标签里进行搭建与配置应用属性。\n- **Simulator**：模拟器主要承载特定运行时环境的页面渲染及与模型层的通信。\n- **Node**：节点模型是对可视化组件/区块的抽象，保留了组件属性集合 Props 的引用，封装了一系列针对组件的 API，比如修改、编辑、保存、拖拽、复制等。\n- **Props**：描述了当前组件所维系的所有可以「设计」的属性，提供一系列操作、遍历和修改属性的方法。同时保持对单个属性 Prop 的引用。\n- **Prop**：属性模型 Prop 与当前可视化组件/区块的某一具体属性想映射，提供了一系列操作属性变更的 API。\n- **Settings**：SettingField 的集合。\n- **SettingField**：它连接属性设置器 Setter 与属性模型 Prop，它是实现多节点属性批处理的关键。\n- **通用交互模型**：内置了拖拽、活跃追踪、悬停探测、剪贴板、滚动、快捷键绑定。\n\n\n### 模拟器\n\n![03](https://img.alicdn.com/imgextra/i2/O1CN01GF1PMj288kxovvnK8_!!6000000007888-2-tps-1500-740.png)\n\n- **运行时环境**：从运行时环境来看，目前我们有 React 生态、Rax 生态。而在对外的历程中，我们也会拥有 Vue 生态、Angular 生态等。\n- **布局模式**：不同于 C 端营销页的搭建，中后台场景大多是表单、表格，流式布局是主流的选择。对于设计师、产品来说，是需要绝对布局的方式来进行页面研发的。\n- **研发场景**：从研发场景来看，低代码搭建不仅有页面编排，还有诸如逻辑编排、业务编排的场景。\n\n\n### 参考\n\nhttps://lowcode-engine.cn/site/docs/guide/design/renderer\n",{"_58":320,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/630/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/630/timeline",{"_58":323,"_60":61,"_62":324,"_64":325,"_66":326,"_68":327,"_70":328,"_72":329,"_74":330,"_76":331,"_78":332,"_111":333,"_131":132,"_133":24,"_134":-5,"_135":336,"_137":337,"_159":152,"_153":339,"_155":340,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":341,"_169":342,"_175":343,"_177":344,"_189":346,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/629","https://api.github.com/repos/pro-collection/interview-question/issues/629/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/629/comments","https://api.github.com/repos/pro-collection/interview-question/issues/629/events","https://github.com/pro-collection/interview-question/issues/629",1987774102,"I_kwDOJGDC6c52ewaW",629,"[低代码] 代码平台一般底层协议是怎么设计的【热度: 263】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[334,335],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":217,"_68":218,"_62":219,"_70":220,"_72":221,"_74":222,"_76":223,"_122":224,"_147":338,"_149":226,"_151":152,"_131":132,"_153":227,"_155":228,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-10T14:49:15Z","2023-11-10T14:54:26Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：代码平台协议设计\r\n\r\n低代码引擎体系基于三份协议来构建: \r\n- [《低代码引擎搭建协议规范》](https://lowcode-engine.cn/site/docs/specs/lowcode-spec)\r\n- [《低代码引擎物料协议规范》](https://lowcode-engine.cn/site/docs/specs/material-spec)\r\n- [《低代码引擎资产包协议规范》](https://lowcode-engine.cn/site/docs/specs/assets-spec)\r\n\r\n![01](https://img.alicdn.com/imgextra/i3/O1CN01axsOyW1s01YgXnT8z_!!6000000005703-2-tps-1888-1000.png)\r\n\r\n\r\n**参考文档**\r\nhttps://lowcode-engine.cn/site/docs/guide/design/specs\r\n",{"_58":345,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/629/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/629/timeline",{"_58":348,"_60":61,"_62":349,"_64":350,"_66":351,"_68":352,"_70":353,"_72":354,"_74":355,"_76":356,"_78":357,"_111":358,"_131":132,"_133":24,"_134":-5,"_135":361,"_137":362,"_159":152,"_153":364,"_155":364,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":365,"_169":366,"_175":367,"_177":368,"_189":370,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/628","https://api.github.com/repos/pro-collection/interview-question/issues/628/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/628/comments","https://api.github.com/repos/pro-collection/interview-question/issues/628/events","https://github.com/pro-collection/interview-question/issues/628",1987758731,"I_kwDOJGDC6c52esqL",628,"[低代码] 代码平台一般架构设计如何【热度: 517】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[359,360],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":217,"_68":218,"_62":219,"_70":220,"_72":221,"_74":222,"_76":223,"_122":224,"_147":363,"_149":226,"_151":152,"_131":132,"_153":227,"_155":228,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-10T14:40:13Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：代码平台\n\n代码平台 - 架构综述\n\n**分层架构描述**\n\n![01](https://img.alicdn.com/imgextra/i4/O1CN016l8gDo1z7zlRlW1P0_!!6000000006668-2-tps-1920-1080.png)\n\n自下而上分别是协议 - 引擎 - 生态 - 平台。\n\n- 底层协议栈定义的是标准，标准的统一让上层产物的互通成为可能。\n- 引擎是对协议的实现，同时通过能力的输出，向上支撑生态开放体系，提供各种生态扩展能力。\n- 生态就好理解了，是基于引擎核心能力上扩展出来的，比如物料、设置器、插件等，还有工具链支撑开发体系。\n- 最后，各个平台基于引擎内核以及生态中的产品组合、衔接形成满足其需求的低代码平台。\n\n**引擎内核简述**\n\n![02](https://img.alicdn.com/imgextra/i1/O1CN01QUUVu21LjTXqY6H8I_!!6000000001335-2-tps-1920-1080.png)\n\n**引擎生态简述**\n![03](https://img.alicdn.com/imgextra/i2/O1CN01LkRseZ23W31l8DPzS_!!6000000007262-2-tps-1920-1080.png)\n\n![04](https://img.alicdn.com/imgextra/i4/O1CN01PYBVfZ1hL82XPrXzX_!!6000000004260-2-tps-1920-1080.png)\n\n\n**参考**\n\nhttps://lowcode-engine.cn/site/docs/guide/design/summary\n",{"_58":369,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/628/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/628/timeline",{"_58":372,"_60":61,"_62":373,"_64":374,"_66":375,"_68":376,"_70":377,"_72":378,"_74":379,"_76":380,"_78":381,"_111":382,"_131":132,"_133":24,"_134":-5,"_135":385,"_137":386,"_159":152,"_153":388,"_155":389,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":390,"_169":391,"_175":392,"_177":393,"_189":395,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/623","https://api.github.com/repos/pro-collection/interview-question/issues/623/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/623/comments","https://api.github.com/repos/pro-collection/interview-question/issues/623/events","https://github.com/pro-collection/interview-question/issues/623",1985957071,"I_kwDOJGDC6c52X0zP",623,"对 babel 的理解？【热度: 551】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[383,384],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":387,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-09T16:07:53Z","2023-11-09T16:07:54Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：babel 作用、为何要使用 babel\n\nBabel 是一个非常流行的 JavaScript 编译器，用于将最新版本的 ECMAScript 代码转换为向后兼容的 JavaScript 代码，以便在旧版浏览器或环境中运行。\n\n以下是对 Babel 的理解：\n\n1. 语法转换：Babel 可以将使用了最新 ECMAScript 标准的代码转换为被广泛支持的旧版 JavaScript 代码。例如，将使用了箭头函数、解构赋值等语法的代码转换为使用 function 关键字和传统赋值的等效代码。\n\n2. Polyfill：Babel 可以通过添加 Polyfill 来支持新的全局函数、方法和对象，以确保代码在旧版本的浏览器中正常运行。通过使用 Polyfill，Babel 可以在浏览器中模拟缺失的特性，使旧版浏览器能够运行使用了这些特性的代码。\n\n3. 插件系统：Babel 的核心功能可以通过插件进行扩展和定制。Babel 提供了众多的插件，用于实现不同的转换和功能。开发者可以根据自己的需求选择和配置相应的插件，以便将代码转换为特定的目标环境。\n\n4. 预设（Presets）：Babel 提供了预设的概念，可以一次性地配置一组插件，以实现特定的转换目标。预设是一组插件的集合，可以根据应用程序的需要进行选择和配置。常见的预设包括 \"@babel/preset-env\"（根据目标环境自动选择转换规则）和 \"@babel/preset-react\"（用于处理 React 相关的代码）。\n\n5. 与构建工具的集成：Babel 可以与构建工具（如 webpack、Rollup 等）无缝集成，作为其转换代码的一部分。通过配置构建工具，可以让 Babel 在构建过程中自动处理源代码，将其转换为目标代码。\n\n总之，Babel 是一个功能强大的 JavaScript 编译器，可以将使用最新 ECMAScript 标准的代码转换为向后兼容的 JavaScript 代码，从而在旧版浏览器或环境中运行。通过插件和预设的配置，Babel 提供了高度的灵活性，使开发者能够根据项目需求定制转换规则。\n\n\n**追问：为何要使用 babel**\n\n使用 Babel 的主要原因是为了解决 JavaScript 代码的兼容性问题。以下是一些使用 Babel 的主要理由：\n\n- 兼容旧版浏览器：不同的浏览器对 JavaScript 的支持程度不同，特别是旧版浏览器可能不支持最新的 ECMAScript 标准。通过使用 Babel，可以将使用了最新语法的代码转换为等效的旧版 JavaScript 语法，使代码能够在旧版浏览器中正常运行。\n\n- 支持新特性：JavaScript 不断演进，每年都会发布新的 ECMAScript 标准，引入了很多有用的特性和语法糖。使用 Babel 可以提前使用这些新特性，而不用等待浏览器的支持。Babel 可以将这些新特性转换为旧版 JavaScript 语法，以便在当前的浏览器环境中使用。\n\n- 模块化支持：Babel 可以转换模块化导入和导出的语法，使得开发者可以在浏览器中使用模块化的方式组织和管理代码。这样可以提高代码的可维护性和重用性。\n",{"_58":394,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/623/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/623/timeline",{"_58":397,"_60":61,"_62":398,"_64":399,"_66":400,"_68":401,"_70":402,"_72":403,"_74":404,"_76":405,"_78":406,"_111":407,"_131":132,"_133":24,"_134":-5,"_135":410,"_137":411,"_159":194,"_153":413,"_155":414,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":415,"_169":416,"_175":417,"_177":418,"_189":420,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/622","https://api.github.com/repos/pro-collection/interview-question/issues/622/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/622/comments","https://api.github.com/repos/pro-collection/interview-question/issues/622/events","https://github.com/pro-collection/interview-question/issues/622",1985930225,"I_kwDOJGDC6c52XuPx",622,"[Webpack] 有哪些优化项目的手段？【热度: 1,163】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[408,409],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":412,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-09T15:53:05Z","2023-11-09T15:55:08Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：打包优化\r\n\r\n围绕 `webpack` 做性能优化，分为两个方面：`构建时间优化`、`构建产物优化`\r\n\r\n\r\n- 优化构建时间\r\n * [缩小范围](#%E7%BC%A9%E5%B0%8F%E8%8C%83%E5%9B%B4)\r\n * [文件后缀](#%E6%96%87%E4%BB%B6%E5%90%8E%E7%BC%80)\r\n * [别名](#%E5%88%AB%E5%90%8D)\r\n * [缓存](#%E7%BC%93%E5%AD%98)\r\n * [并行构建](#%E5%B9%B6%E8%A1%8C%E6%9E%84%E5%BB%BA)\r\n * [定向查找第三方模块](#%E5%AE%9A%E5%90%91%E6%9F%A5%E6%89%BE%E7%AC%AC%E4%B8%89%E6%96%B9%E6%A8%A1%E5%9D%97)\r\n- [构建产物](#%E6%9E%84%E5%BB%BA%E7%BB%93%E6%9E%9C%E4%BC%98%E5%8C%96)\r\n * [压缩 js](#%E5%8E%8B%E7%BC%A9-js)\r\n * [压缩 css](#%E5%8E%8B%E7%BC%A9-css)\r\n * [压缩 html](#%E5%8E%8B%E7%BC%A9-html)\r\n * [压缩图片](#%E5%8E%8B%E7%BC%A9%E5%9B%BE%E7%89%87)\r\n * [按需加载](#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD)\r\n * [prload、prefetch](#prloadprefetch)\r\n * [代码分割](#%E4%BB%A3%E7%A0%81%E5%88%86%E5%89%B2)\r\n * [tree shaking](#tree-shaking)\r\n * [gzip](#gzip)\r\n * [作用域提升](#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%90%E5%8D%87)\r\n\r\n\r\n\r\n### 构建时间优化\r\n\r\n#### 缩小范围\r\n\r\n我们在使用 loader 时，可以配置 `include`、`exclude`缩小 loader 对文件的搜索范围，以此来提高构建速率。\r\n\r\n像 `/node_moudles` 目录下的体积辣么大，又是第三方包的存储目录，直接 `exclude` 掉可以节省一定的时间的。\r\n\r\n当然 `exclude` 和 `include` 可以一起配置，大部分情况下都是只需要使用 loader 编译 src 目录下的代码\r\n\r\n```js\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /\\.(|ts|tsx|js|jsx)$/,\r\n // 只解析 src 文件夹下的 ts、tsx、js、jsx 文件\r\n // include 可以是数组，表示多个文件夹下的模块都要解析\r\n include: path.resolve(__dirname, '../src'), \r\n use: [ 'thread-loader', 'babel-loader'],\r\n \r\n //当然也可以配置 exclude，表示 loader 解析时不会编译这部分文件\r\n //同样 exclude 也可以是数组\r\n exclude: /node_modules/,\r\n }\r\n ]\r\n }\r\n}\r\n```\r\n\r\n还需注意一个点就是要确保 loader 的`准确性`，**比如不要使用 less-loader 去解析 css 文件**\r\n\r\n#### 文件后缀\r\n\r\n`resolve.extensions` 是我们常用的一个配置，他可以在导入语句没有带文件后缀时，可以按照配置的列表，自动补上后缀。**我们应该根据我们项目中文件的实际使用情况设置后缀列表，将使用频率高的放在前面、同时后缀列表也要尽可能的少，减少没有必要的匹配**。同时，我们在源码中写导入语句的时候，尽量带上后缀，避免查找匹配浪费时间。\r\n\r\n```js\r\nmodule.export = {\r\n resolve: {\r\n // 按照 tsx、ts、jsx、js 的顺序匹配，若没匹配到则报错\r\n extensions: ['.tsx', '.ts', '.jsx', '.js'],\r\n }\r\n}\r\n```\r\n\r\n#### 别名\r\n\r\n通过配置 `resolve.alias` 别名的方式，减少引用文件的路径复杂度\r\n\r\n```js\r\nmodule.exports = {\r\n resolve: {\r\n alias: {\r\n //把 src 文件夹别名为 @\r\n //引入 src 下的文件就可以 import xxx from '@/xxx'\r\n '@': path.join(__dirname, '../src')\r\n }\r\n }\r\n}\r\n\r\n// 引入 src 下的某个模块时\r\nimport XXX from '@/xxx/xxx.tsx'\r\n```\r\n\r\n#### 缓存\r\n\r\n在优化的方案中，缓存也是其中重要的一环。在构建过程中，开启缓存提升二次打包速度。\r\n\r\n在项目中，js 文件是占大头的，当项目越来越大时，如果每次都需要去编译 JS 代码，那么构建的速度肯定会很慢的，所以我们可以配置 `babel-loader` 的缓存配置项 `cacheDirectory` 来缓存没有变过的 js 代码\r\n\r\n```js\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /.jsx?$/,\r\n use: [\r\n {\r\n loader: 'babel-loader',\r\n options: {\r\n cacheDirectory: true,\r\n },\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n}\r\n```\r\n\r\n上面的缓存优化只是针对像 `babel-loader` 这样可以配置缓存的 loader，那没有缓存配置的 loader 该怎么使用缓存呢，此时需要 `cache-loader`\r\n\r\n```js\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /.jsx?$/,\r\n use: [\r\n 'cache-loader', \r\n \"babel-loader\"\r\n ],\r\n }\r\n ]\r\n }\r\n}\r\n```\r\n\r\n编译后同样多一个 `/node_modules/.cache/cache-loader` 缓存目录\r\n\r\n当然还有一种方式，`webpack5`直接提供了 `cache` 配置项，开启后即可缓存\r\n\r\n```js\r\nmodule.exports = {\r\n cache: {\r\n type: 'filesystem'\r\n }\r\n}\r\n```\r\n\r\n编译后会多出 `/node_modules/.cache/webpack` 缓存目录\r\n\r\n#### 并行构建\r\n\r\n首先，运行在`Node`里的`webpack`是单线程的，所以一次性只能干一件事，那如果利用电脑的多核优势，也能提高构建速度？[thread-loader](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fwebpack-contrib%2Fthread-loader \"https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fwebpack-contrib%2Fthread-loader\")可以开启多进程打包\r\n\r\n```js\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /.jsx?$/,\r\n use: [\r\n // 开启多进程打包。 \r\n {\r\n loader: 'thread-loader', \r\n options: {\r\n workers: 3 // 开启 3个进程\r\n }\r\n },\r\n {\r\n loader: 'babel-loader',\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n}\r\n```\r\n\r\n放置在这个 `thread-loader` 之后的 loader 就会在一个单独的 worker 池(worker pool) 中运行。\r\n\r\n每个 worker 都是一个单独的有 600ms 限制的 `node.js` 进程。同时跨进程的数据交换也会被限制。所以建议仅在耗时的 loader 上使用。若项目文件不算多就不要使用，毕竟开启多个线程也会存在性能开销。\r\n\r\n#### 定向查找第三方模块\r\n\r\n`resolve.modules` 配置用于指定 `webpack` 去哪些目录下寻找第三方模块。默认值是 `['node_modules']`。而在引入模块的时候，会以 `node 核心模块 -----> node_modules ------> node全局模块` 的顺序查找模块。\r\n\r\n我们通过配置 resolve.modules 指定 webpack 搜索第三方模块的范围，提高构建速率\r\n\r\n```js\r\nmodule.export = {\r\n resolve: {\r\n modules: [path.resolve(__dirname, 'node_modules')]\r\n }\r\n}\r\n```\r\n\r\n### 构建产物优化\r\n\r\n#### 压缩 js\r\n\r\nwebpack5的话通过 `terser-webpack-plugin` 来压缩 JS，但在配置了 `mode: production` 时，会默认开启\r\n\r\n```js\r\nconst TerserPlugin = require('terser-webpack-plugin');\r\n\r\nmodule.exports = {\r\n optimization: {\r\n // 开启压缩\r\n minimize: true,\r\n // 压缩工具\r\n minimizer: [\r\n new TerserPlugin({}),\r\n ],\r\n },\r\n}\r\n```\r\n\r\n需要注意一个地方：生产环境会默认配置`terser-webpack-plugin`，所以如果你还有其它压缩插件使用的话需要将`TerserPlugin`显示配置或者使用`...`，否则`terser-webpack-plugin`会被覆盖。\r\n\r\n```js\r\nconst TerserPlugin = require(\"terser-webpack-plugin\"); \r\n\r\noptimization: {\r\n minimize: true,\r\n minimizer: [\r\n new TerserPlugin({}), // 显示配置\r\n // \"...\", // 或者使用展开符，启用默认插件\r\n // 其它压缩插件\r\n new CssMinimizerPlugin(),\r\n ],\r\n},\r\n```\r\n\r\n#### 压缩 css\r\n\r\n压缩 css 我们使用 `css-minimizer-webpack-plugin`\r\n\r\n同时，应该把 css 提取成单独的文件，使用 `mini-css-extract-plugin`\r\n\r\n```js\r\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\r\nconst CssMinimizerPlugin = require(\"css-minimizer-webpack-plugin\");\r\n\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /\\.css$/,\r\n use: [\r\n // 提取成单独的文件\r\n MiniCssExtractPlugin.loader,\r\n \"css-loader\"\r\n ],\r\n exclude: /node_modules/, \r\n },\r\n ]\r\n },\r\n plugins: [\r\n new MiniCssExtractPlugin({\r\n // 定义输出文件名和目录\r\n filename: \"asset/css/main.css\",\r\n })\r\n ],\r\n optimization: {\r\n minimize: true,\r\n minimizer: [\r\n // 压缩 css\r\n new CssMinimizerPlugin({}),\r\n ],\r\n },\r\n}\r\n```\r\n\r\n#### 压缩 html\r\n\r\n压缩 `html` 使用的还是 `html-webpack-plugin` 插件。该插件支持配置一个 [minify](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fkangax%2Fhtml-minifier%23options-quick-reference \"https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fkangax%2Fhtml-minifier%23options-quick-reference\") 对象，用来配置压缩 `html`。\r\n\r\n```js\r\nmodule.export = {\r\n plugins: [\r\n new HtmlWebpackPlugin({\r\n // 动态生成 html 文件\r\n template: \"./index.html\",\r\n minify: {\r\n // 压缩HTML\r\n removeComments: true, // 移除HTML中的注释\r\n collapseWhitespace: true, // 删除空⽩符与换⾏符\r\n minifyCSS: true // 压缩内联css\r\n },\r\n })\r\n ]\r\n}\r\n```\r\n\r\n#### 压缩图片\r\n\r\n可以通过 `image-webpack-loader` 来实现\r\n\r\n```js\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /\\.(png|jpg|gif|jpeg|webp|svg)$/,\r\n use: [\r\n \"file-loader\",\r\n {\r\n loader: \"image-webpack-loader\",\r\n options: {\r\n mozjpeg: {\r\n progressive: true,\r\n },\r\n optipng: {\r\n enabled: false,\r\n },\r\n pngquant: {\r\n quality: [0.65, 0.9],\r\n speed: 4,\r\n },\r\n gifsicle: {\r\n interlaced: false,\r\n },\r\n },\r\n },\r\n ],\r\n exclude: /node_modules/, //排除 node_modules 目录\r\n },\r\n ]\r\n },\r\n}\r\n```\r\n\r\n#### 按需加载\r\n\r\n很多时候我们不需要一次性加载所有的`JS`文件，而应该在不同阶段去加载所需要的代码。\r\n\r\n**将路由页面/触发性功能单独打包为一个文件，使用时才加载**，好处是`减轻首屏渲染的负担`。因为项目功能越多其打包体积越大，导致首屏渲染速度越慢。\r\n\r\n实际项目中大部分是对懒加载路由，而懒加载路由可以打包到一个 chunk 里面。比如某个列表页和编辑页它们之间存在相互跳转，如果对它们拆分成两个 `import()` js 资源加载模块，在跳转过程中视图会出现白屏切换过程。\r\n\r\n因为在跳转期间，浏览器会动态创建 script 标签来加载这个 `chunk` 文件，在这期间，页面是没有任何内容的。\r\n\r\n所以一般会把路由懒加载打包到一个 chunk 里面\r\n\r\n```js\r\nconst List = lazyComponent('list', () => import(/* webpackChunkName: \"list\" */ '@/pages/list'));\r\nconst Edit = lazyComponent('edit', () => import(/* webpackChunkName: \"list\" */ '@/pages/edit'));\r\n```\r\n\r\n但需要注意一点：**动态导入 import() 一个模块，这个模块就不能再出现被其他模块使用 `同步 import` 方式导入。**\r\n\r\n比如，一个路由模块在注册 `` 时采用动态 import() 导入，但在这个模块对外暴露了一些变量方法供其他子模块使用，在这些子模块中使用了同步 ESModule import 方式引入，这就造成了 `动态 import()` 的失效。\r\n\r\n#### prload、prefetch\r\n\r\n对于某些较大的模块，如果点击时再加载，那可能响应的时间反而延长。我们可以使用 `prefetch`、`preload` 去加载这些模块\r\n\r\n`prefetch`：将来可能需要一些模块资源（一般是其他页面的代码），在核心代码加载完成之后`带宽空闲`的时候再去加载需要用到的模块代码。\r\n\r\n`preload`：当前核心代码加载期间可能需要模块资源（**当前页面需要的但暂时还没使用到的**），其是和核心代码文件一起去加载的。\r\n\r\n只需要通过`魔法注释`即可实现，以 `prefetch` 为例：\r\n\r\n```js\r\ndocument.getElementById('btn1').onclick = function() {\r\n import(\r\n /* webpackChunkName: \"btnChunk\" */\r\n /* webpackPrefetch: true*/\r\n './module1.js'\r\n ).then(fn => fn.default());\r\n}\r\n```\r\n\r\n这行代码表示在浏览器空闲时加载 module1.js 模块，并且单独拆一个 chunk，叫做 btnChunk\r\n\r\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2e2b2771db547138ed818cd33d23139~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)\r\n\r\n可以看到，在`head`里面，我们的懒加载模块被直接引入了，并且加上了`rel='prefetch'`。\r\n\r\n这样，页面首次加载的时候，浏览器空闲的会后会提前加载`module1.js`。当我们点击按钮的时候，会直接从缓存中读取该文件，因此速度非常快。\r\n\r\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95cd9e7ee4b345ec8ef5eca12947f650~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)\r\n\r\n#### 代码分割\r\n\r\n在项目中，一般是使用同一套技术栈和公共资源。**如果每个页面的代码中都有这些公开资源，就会导致资源的浪费**。在每一个页面下都会加载重复的公共资源，一是会浪费用户的流量，二是不利于项目的性能，造成页面加载缓慢，影响用户体验。\r\n\r\n一般是把不变的**第三方库**、**一些公共模块**（比如 util.js）这些单独拆成一个 chunk，在访问页面的时候，就可以一直使用浏览器缓存中的资源\r\n\r\nwebpack 里面通过 `splitChunks` 来分割代码\r\n\r\n```js\r\nmodule.exports = {\r\n //...\r\n optimization: {\r\n splitChunks: {\r\n chunks: 'async', // 值有 `all`，`async` 和 `initial`\r\n minSize: 20000, // 生成 chunk 的最小体积（以 bytes 为单位）。\r\n minRemainingSize: 0,\r\n minChunks: 1, // 拆分前必须共享模块的最小 chunks 数。\r\n maxAsyncRequests: 30, // 按需加载时的最大并行请求数。\r\n maxInitialRequests: 30, // 入口点的最大并行请求数。\r\n enforceSizeThreshold: 50000,\r\n cacheGroups: {\r\n defaultVendors: {\r\n test: /[\\/]node_modules[\\/]/, //第三方模块拆出来\r\n priority: -10,\r\n reuseExistingChunk: true,\r\n },\r\n util.vendors: {\r\n test: /[\\/]utils[\\/]/, //公共模块拆出来\r\n minChunks: 2,\r\n priority: -20,\r\n reuseExistingChunk: true,\r\n },\r\n },\r\n },\r\n },\r\n};\r\n```\r\n\r\n#### tree shaking\r\n\r\ntree shaking 的原理细节可以看这篇文章[：# webpack tree-shaking解析](https://juejin.cn/post/7246219936594821180 \"https://juejin.cn/post/7246219936594821180\")\r\n\r\n`tree shaking`在**生产模式下已经默认开启了**\r\n\r\n只是需要注意下面几点：\r\n\r\n1. 只对`ESM`生效\r\n2. 只能是静态声明和引用的 `ES6` 模块，不能是动态引入和声明的。\r\n3. 只能处理模块级别，不能处理函数级别的冗余。\r\n4. 只能处理 `JS` 相关冗余代码，不能处理 `CSS` 冗余代码。\r\n\r\n而可能样式文件里面有些代码我们也没有使用，我们可以通过`purgecss-webpack-plugin` 插件来对 css 进行 tree shaking\r\n\r\n```js\r\nconst path = require(\"path\");\r\nconst PurgecssPlugin = require(\"purgecss-webpack-plugin\");\r\nconst glob = require(\"glob\"); // 文件匹配模式\r\n\r\nmodule.exports = {\r\n //...\r\n plugins: [\r\n ...\r\n new PurgeCSSPlugin({\r\n paths: glob.sync(`${PATH.src}/**/*`, { nodir: true }),\r\n })\r\n\r\n // Add your plugins here\r\n // Learn more about plugins from https://webpack.js.org/configuration/plugins/\r\n ],\r\n};\r\n```\r\n\r\n#### gzip\r\n\r\n前端除了在打包的时候将无用的代码或者 `console`、注释剔除之外。我们还可以使用 `Gzip` 对资源进行进一步压缩。那么浏览器和服务端是如何通信来支持 `Gzip` 呢？\r\n\r\n1. 当用户访问 web 站点的时候，会在 `request header` 中设置 `accept-encoding:gzip`，表明浏览器是否支持 `Gzip`。\r\n2. 服务器在收到请求后，判断如果需要返回 `Gzip` 压缩后的文件那么服务器就会先将我们的 `JS\\CSS` 等其他资源文件进行 `Gzip` 压缩后再传输到客户端，同时将 `response headers` 设置 `content-encoding:gzip`。反之，则返回源文件。\r\n3. 浏览器在接收到服务器返回的文件后，判断服务端返回的内容是否为压缩过的内容，是的话则进行解压操作。\r\n\r\n一般情况下我们并不会让服务器实时 `Gzip` 压缩，而是利用`webpack`提前将静态资源进行`Gzip` 压缩，然后将`Gzip` 资源放到服务器，当请求需要的时候直接将`Gzip` 资源发送给客户端。\r\n\r\n我们只需要安装 `compression-webpack-plugin` 并在`plugins`配置就可以了\r\n\r\n```js\r\nconst CompressionWebpackPlugin = require(\"compression-webpack-plugin\"); // 需要安装\r\n\r\nmodule.exports = {\r\n plugins: [\r\n new CompressionWebpackPlugin()\r\n ]\r\n}\r\n```\r\n\r\n#### 作用域提升\r\n\r\n`Scope Hoisting` 可以让 `webpack` 打包出来的代码文件体积更小，运行更快。\r\n\r\n在开启 `Scope Hoisting`后，**构建后的代码会按照引入顺序放到一个函数作用域里，通过适当重命名某些变量以防止变量名冲突**，从而减少函数声明和内存花销。\r\n\r\n需要注意：`Scope Hoisting` 需要分析模块之间的依赖关系，所以源码必须采用 ES6 模块化语法\r\n\r\n`Scope Hoisting` 是 webpack 内置功能，只需要在`plugins`里面使用即可，或者直接开启生产环境也可以让作用域提升生效。\r\n\r\n```js\r\nmodule.exports = {\r\n //方式1\r\n mode: 'production',\r\n\r\n //方式2\r\n plugins: [\r\n // 开启 Scope Hoisting 功能\r\n new webpack.optimize.ModuleConcatenationPlugin()\r\n ]\r\n}\r\n```\r\n",{"_58":419,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/622/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/622/timeline",{"_58":422,"_60":61,"_62":423,"_64":424,"_66":425,"_68":426,"_70":427,"_72":428,"_74":429,"_76":430,"_78":431,"_111":432,"_131":132,"_133":24,"_134":-5,"_135":435,"_137":436,"_159":152,"_153":438,"_155":439,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":440,"_169":441,"_175":442,"_177":443,"_189":445,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/612","https://api.github.com/repos/pro-collection/interview-question/issues/612/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/612/comments","https://api.github.com/repos/pro-collection/interview-question/issues/612/events","https://github.com/pro-collection/interview-question/issues/612",1972672971,"I_kwDOJGDC6c51lJnL",612,"[Webpack] 全面了解 tree shaking【热度: 790】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[433,434],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":437,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-01T16:11:25Z","2023-11-01T16:11:59Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"### webpack 如何做 tree shaking\n\n`Webpack`通过`tree shaking`技术实现了JavaScript代码的优化和精简。`Tree shaking`是指通过静态代码分析，识别和移除未被使用的代码（被称为\"dead code\"），从而减小最终打包后的文件大小。\n\n下面是Webpack如何进行tree shaking的步骤：\n\n1. 代码标记：在代码中使用ES6模块化语法（如`import`和`export`）来明确指定模块的依赖关系。\n\n2. 代码解析：Webpack会解析整个代码，并构建一个依赖图谱，记录模块之间的依赖关系。\n\n3. 标记未使用代码：在构建依赖图谱的过程中，Webpack会标记那些未被使用的模块，以及这些模块中的未被使用的函数、类、变量等。\n\n4. 无副作用标记：Webpack还会检查模块的副作用（例如对全局变量的修改、网络请求等），并将没有副作用的代码视为可安全移除的。\n\n5. 未使用代码移除：在代码打包阶段，Webpack会根据标记的未使用代码信息，从最终的打包结果中移除这些未被使用的代码。\n\n通过tree shaking，Webpack可以减小打包后的文件大小，提高应用的加载速度和性能。但要注意的是，tree shaking只对ES6模块化的代码有效，对于CommonJS模块化的代码则无法进行优化。另外，有些代码可能由于复杂的依赖关系无法被正确地标记为未使用，这就需要开发者自己进行配置或使用其他工具进行优化。\n\n\n### webpack 处理 tree shaking 配置\n\n要在Webpack中配置tree shaking，需要进行以下步骤：\n\n1. 在`webpack.config.js`文件中，将`mode`设置为`production`，这会启用Webpack的优化功能，包括tree shaking。\n\n```javascript\nmodule.exports = {\n mode: 'production',\n // 其他配置...\n};\n```\n\n2. 确保你的代码使用了ES6模块化语法（使用`import`和`export`），以便Webpack能够正确地进行静态代码分析。\n\n3. 确保你的代码库中没有副作用。Webpack会假设没有副作用的代码可以安全地移除。如果你的代码确实有副作用，可以在webpack配置文件中的`optimization`选项中设置`sideEffects`为`false`来告诉Webpack可以安全地进行tree shaking。\n\n```javascript\nmodule.exports = {\n mode: 'production',\n optimization: {\n sideEffects: false,\n },\n // 其他配置...\n};\n```\n\n\n### 了解一下副作用\n\n在计算机科学中，副作用是指函数或代码的执行对除了返回一个值之外的程序状态产生了可观察的变化。换句话说，副作用是指对外部环境产生了影响或产生了可观察的行为。\n\n以下是一些常见的副作用示例：\n\n- 修改全局变量或外部状态：函数修改了全局变量或外部状态，例如修改了一个共享的数组、对象或文件等。\n\n- 发送网络请求：函数通过网络发送了一个HTTP请求，这会触发网络交互并产生副作用。\n\n- 修改函数参数：函数修改了传入的参数值，这会影响函数外部的变量。\n\n- 控制台打印：函数在执行过程中使用了`console.log()`或其他打印语句，这会在控制台中产生可观察到的输出。\n\n- 异步操作：函数中包含了异步操作，例如定时器、Promise或通过回调函数实现的异步操作。\n\n\n### 如何申明代码是有副作用\n\n某一些代码是是需要禁止被清理掉，这个时候该如何处理呢？\n\n有几个办法：\n\n**方法一：在配置文件中指定副作用**\n\n在Webpack配置文件中，可以使用`sideEffects`选项来指定哪些文件或模块具有副作用，不允许清理。`sideEffects`接受一个正则表达式、一个文件名或一个数组。例如：\n\n```javascript\nmodule.exports = {\n //...\n optimization: {\n usedExports: true\n },\n mode: 'production',\n sideEffects: [\"./src/some-module.js\"]\n};\n```\n\n在上面的例子中，`sideEffects`数组中的`./src/some-module.js`文件将会被标记为具有副作用，不会被清理。\n\n请注意，为了使`sideEffects`选项生效，你需要在配置文件中启用`optimization.usedExports`选项，并将`mode`设置为`production`。\n\n**方法二：package.json 中配置 sideEffects 属性**\n\n可以在`package.json`文件中使用`sideEffects`字段来申明哪些文件或模块具有副作用，不允许被清理。\n\n1. 如果将`sideEffects`设置为布尔值`false`，表示所有导入的文件都被认为没有副作用，可以被tree shaking清理。这在大多数情况下是默认的行为。\n\n```json\n{\n \"name\": \"my-package\",\n \"version\": \"1.0.0\",\n \"sideEffects\": false\n}\n```\n\n2. 如果设置为布尔值`true`，表示所有导入的文件都被认为有副作用，不会被tree shaking清理。\n\n```json\n{\n \"name\": \"my-package\",\n \"version\": \"1.0.0\",\n \"sideEffects\": true\n}\n```\n\n3. 如果将`sideEffects`设置为一个数组，数组中的每个元素可以是一个字符串或一个正则表达式，表示具有副作用的文件或模块。\n\n```json\n{\n \"name\": \"my-package\",\n \"version\": \"1.0.0\",\n \"sideEffects\": [\n \"./src/some-module.js\",\n \"/\\.css$/\"\n ]\n}\n```\n\n在上述示例中，`./src/some-module.js`文件和所有以`.css`结尾的文件都被认为有副作用，不会被tree shaking清理。\n\n\n### 如果我某一个文件配置了 sideEffects 申明该文件有副作用，但是我又想清理其中的某个函数\n\n魔法中的魔法注释: `/*#__PURE__*/`\n\n通过上面的知识，我们知道了，如果是有如果被 sideEffects 申明了副作用的文件，是不会被 tree shaking 清理掉的，但是也有例外。\n\n`/*#__PURE__*/`这个注释的作用是告诉Webpack或Babel等构建工具，这一行代码是纯粹的，没有副作用，并且可以安全地进行tree shaking（摇树优化）。\n\n对于一些库或框架，可能会有一些函数或类被导出，但实际上很少被使用，为了让构建工具知道这些代码可以被删除，可以在导出语句上添加`/*#__PURE__*/`注释。\n\n例如，假设 `src/myModule.js` 文件有下面的代码：\n\n```javascript\nexport /*#__PURE__*/ function add(a, b) {\n return a + b;\n}\n\nexport function subtract(a, b) {\n return a - b;\n}\n```\n\n且 webpack 已经将 `src/myModule.js` 申明为了有副作用文件\n```js\nmodule.exports = {\n // ...\n optimization: {\n sideEffects: [\"./src/myModule.js\"],\n },\n};\n```\n虽然通过 `sideEffects` 配置申明了 `./src/myModule.js` 文件是有副作用的，但是由于 `add` 方法前面有 `/*#__PURE__*/` 注释标记，意味着这个方法被标记为纯函数，该方法是没有副作用。\n\n因此最终通过 `/*#__PURE__*/` 注释标记的 `add` 方法依然可以被 Webpack 的 Tree Shaking 清理。\n\n\n### commonjs 模块就真的不能被 tree shaking 了？\n\n> 下面这段来自于 webpack 官网\n> 参考文档： https://webpack.docschina.org/blog/2020-10-10-webpack-5-release/#commonjs-tree-shaking\n\nWebpack 曾经不进行对 CommonJs 导出和 require() 调用时的导出使用分析。\n\nWebpack 5 增加了对一些 CommonJs 构造的支持，允许消除未使用的 CommonJs 导出，并从 require() 调用中跟踪引用的导出名称。\n\n支持以下构造：\n\n- `exports|this|module.exports.xxx = ...`\n- `exports|this|module.exports = require(\"...\") (reexport)`\n- `exports|this|module.exports.xxx = require(\"...\").xxx (reexport)`\n- `Object.defineProperty(exports|this|module.exports, \"xxx\", ...)`\n- `require(\"abc\").xxx`\n- `require(\"abc\").xxx()`\n- 从 ESM 导入\n- `require()` 一个 ESM 模块\n- 被标记的导出类型 (对非严格 ESM 导入做特殊处理):\n - `Object.defineProperty(exports|this|module.exports, \"__esModule\", { value: true|!0 })`\n - `exports|this|module.exports.__esModule = true|!0`\n\n当检测到不可分析的代码时，webpack 会放弃，并且完全不跟踪这些模块的导出信息（出于性能考虑）。\n\n\n### 终极必杀问：webpack tree-shaking 在什么情况下会失效\n\n- 动态导入：如果你使用了动态导入（例如使用了 import() 或 require.ensure()），webpack 无法静态分析模块的导入和导出，因此无法进行 tree-shaking。\n\n- 未使用 ES6 模块语法：tree-shaking 只能对 ES6 模块语法进行优化，如果你的代码中没有使用 ES6 模块语法，webpack 将无法进行 tree-shaking。\n\n- 模块被动态引用或条件引用：如果模块的引用方式是动态的（例如在循环或条件语句中引用），或者通过字符串拼接来引用模块，webpack 无法确定哪些模块会被引用，因此无法进行 tree-shaking。\n\n- 使用了副作用的代码：如果你的代码中包含有副作用的代码（例如在模块的顶级作用域中执行了一些操作），webpack 无法确定哪些代码是无用的，因此无法进行 tree-shaking。\n\n可以参考这个回答：https://github.com/pro-collection/interview-question/issues/523\n\n",{"_58":444,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/612/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/612/timeline",{"_58":447,"_60":61,"_62":448,"_64":449,"_66":450,"_68":451,"_70":452,"_72":453,"_74":454,"_76":455,"_78":456,"_111":457,"_131":132,"_133":24,"_134":-5,"_135":460,"_137":461,"_159":152,"_153":463,"_155":464,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":465,"_169":466,"_175":467,"_177":468,"_189":470,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/610","https://api.github.com/repos/pro-collection/interview-question/issues/610/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/610/comments","https://api.github.com/repos/pro-collection/interview-question/issues/610/events","https://github.com/pro-collection/interview-question/issues/610",1970827268,"I_kwDOJGDC6c51eHAE",610,"[Webpack] 如何打包运行时 chunk ，且在项目工程中，如何去加载这个运行时 chunk ?【热度: 421】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[458,459],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":462,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-31T16:17:40Z","2023-11-01T14:57:35Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"Webpack打包运行时chunk的方式可以通过optimization.runtimeChunk选项来配置。下面是一个示例的配置：\n\n```javascript\nmodule.exports = {\n // ...\n optimization: {\n runtimeChunk: 'single',\n },\n};\n```\n\n上述配置中，通过设置optimization.runtimeChunk为'single'，将会把所有的webpack运行时代码打包为一个单独的chunk。\n\n在项目工程中加载运行时chunk有两种方式：\n\n1. 通过script标签加载：可以使用HtmlWebpackPlugin插件来自动将运行时chunk添加到 HTML 文件中。在webpack配置文件中添加以下配置：\n\n```javascript\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n // ...\n plugins: [\n new HtmlWebpackPlugin({\n // ...\n chunks: ['runtime', 'app'],\n }),\n ],\n};\n```\n\n上述配置中，chunks选项指定了要加载的chunk，包括运行时chunk（'runtime'）和其他的业务代码chunk（'app'）。最终生成的HTML文件会自动引入这些chunk。\n\n2. 通过import语句动态加载：可以使用动态导入的方式来加载运行时chunk。在需要加载运行时chunk的地方，使用以下代码：\n\n```javascript\nimport(/* webpackChunkName: \"runtime\" */ './path/to/runtime').then((runtime) => {\n // 运行时chunk加载完成后的逻辑\n});\n```\n\n上述代码中，通过import()函数动态加载运行时chunk，通过webpackChunkName注释指定要加载的chunk名称（这里是'runtime'）。加载完成后，可以进行相关逻辑处理。\n\n总结：Webpack可以通过optimization.runtimeChunk选项配置打包运行时chunk，可以通过script标签加载或者使用动态导入的方式来加载运行时chunk。\n\n\n**追问**\n> 如果只想把某几个文件打包成运行时加载，该如何处理呢？\n\n如果你想将某几个文件打包成运行时加载，可以使用Webpack的`entry`配置和`import()`语法来实现。\n\n首先，在Webpack的配置文件中，将这几个文件指定为单独的`entry`点。例如：\n\n```javascript\nmodule.exports = {\n // ...\n entry: {\n main: './src/main.js',\n runtime: './src/runtime.js',\n },\n};\n```\n\n上述配置中，`main.js`是业务代码的入口文件，`runtime.js`是你想要打包成运行时加载的文件。\n\n然后，在你的业务代码中，通过`import()`动态导入这些文件。例如：\n\n```javascript\nfunction loadRuntime() {\n return import('./runtime.js');\n}\n\n// 使用动态导入的方式加载运行时文件\nloadRuntime().then(runtime => {\n // 运行时文件加载完成后的逻辑\n});\n```\n\n使用`import()`会返回一个`Promise`，可以通过`.then()`来处理文件加载完成后的逻辑。\n\n最后，使用Webpack进行打包时，会根据配置的`entry`点和`import()`语法自动将这几个文件打包成运行时加载的模块。运行时模块会在需要时动态加载并执行。\n\n注意：在使用`import()`动态导入文件时，需要确保你的环境支持`Promise`和动态导入语法。\n\n**作为上面回复的补充**\n\n除了 `entry` 的方式可以处理自己申明的 runtime 文件以外，还可以直接在 `import('xx')` 的时候申明； \n例如：\n```js\nimport(/* webpackChunkName: \"runtime\" */ './path/to/runtime').then((runtime) => {\n // 运行时chunk加载完成后的逻辑\n});\n```\n上面的方式，可以在也可以达到同样的效果，只是在 `import` 的时候申明runtime文件名称而已\n\n\n\n\n",{"_58":469,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/610/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/610/timeline",{"_58":472,"_60":61,"_62":473,"_64":474,"_66":475,"_68":476,"_70":477,"_72":478,"_74":479,"_76":480,"_78":481,"_111":482,"_131":132,"_133":24,"_134":-5,"_135":485,"_137":486,"_159":152,"_153":499,"_155":500,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":501,"_169":502,"_175":503,"_177":504,"_189":506,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/609","https://api.github.com/repos/pro-collection/interview-question/issues/609/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/609/comments","https://api.github.com/repos/pro-collection/interview-question/issues/609/events","https://github.com/pro-collection/interview-question/issues/609",1970800181,"I_kwDOJGDC6c51eAY1",609,"[Webpack] 如何配置多入口应用，且区分公共依赖的？【热度: 124】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[483,484],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":487,"_68":488,"_62":489,"_70":490,"_72":491,"_74":492,"_76":493,"_122":494,"_147":495,"_149":496,"_151":152,"_131":132,"_153":497,"_155":498,"_157":-5,"_158":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/2","https://github.com/pro-collection/interview-question/milestone/2","https://api.github.com/repos/pro-collection/interview-question/milestones/2/labels",9124545,"MI_kwDOJGDC6c4AizrB",2,"中","中级程序面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},510,"2023-03-06T15:00:15Z","2025-09-07T06:08:31Z","2023-10-31T16:03:01Z","2023-11-01T14:57:34Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"在Webpack中配置多入口应用并区分公共依赖，可以通过以下步骤进行配置：\n\n1. 在Webpack配置文件中，使用entry属性指定多个入口文件，并为每个入口文件命名一个唯一的键名。例如：\n\n```javascript\nmodule.exports = {\n entry: {\n app1: './src/app1.js',\n app2: './src/app2.js'\n },\n // 其他配置项...\n};\n```\n\n上面的配置指定了两个入口文件app1.js和app2.js，并为它们分别指定了键名app1和app2。\n\n2. 使用SplitChunks插件进行公共依赖的提取。在Webpack配置文件中添加以下配置：\n\n```javascript\nmodule.exports = {\n // 其他配置项...\n optimization: {\n splitChunks: {\n cacheGroups: {\n commons: {\n name: 'commons',\n chunks: 'all',\n minChunks: 2\n }\n }\n }\n }\n};\n```\n\n上面的配置中，我们使用optimization.splitChunks.cacheGroups选项配置了一个名为commons的缓存组。该缓存组将对公共依赖进行提取，name属性指定了提取后文件的名称，chunks属性指定了提取的范围为所有类型的块（入口文件和异步加载的块），minChunks属性指定了至少被引用两次的模块才会被提取为公共依赖。\n\n3. 添加output配置，指定打包后文件的输出路径和文件名。例如：\n\n```javascript\nmodule.exports = {\n // 其他配置项...\n output: {\n filename: '[name].bundle.js',\n path: path.resolve(__dirname, 'dist')\n }\n};\n```\n\n上面的配置中，使用[name]占位符来动态生成根据入口文件的键名生成对应的文件名。\n\n通过以上配置，Webpack将会根据指定的多个入口文件进行打包，并在打包过程中自动提取公共依赖为一个独立的文件。例如，假设app1.js和app2.js都引用了lodash库，那么在打包后的结果中，lodash库将会被提取为commons.bundle.js文件，而app1.js和app2.js则分别生成对应的app1.bundle.js和app2.bundle.js。\n\n\n**追问**\n> 上面的配置，最终会输出几个文件？ \n\n根据上述的打包配置，最终将会输出3个文件。假设配置的多入口应用有两个入口文件app1.js和app2.js，并且两个入口文件都引用了lodash库作为公共依赖。\n\n根据上述的配置，Webpack将会进行以下操作：\n\n1. 根据entry配置，将app1.js和app2.js作为入口文件进行打包。\n2. 遇到公共依赖lodash库时，使用SplitChunks插件将其提取为独立的文件commons.bundle.js。\n3. 根据output配置，将app1.js打包后生成app1.bundle.js，将app2.js打包后生成app2.bundle.js，将commons.bundle.js生成commons.bundle.js。\n4. 最终，在输出路径下将会生成3个文件：app1.bundle.js、app2.bundle.js和commons.bundle.js。\n\n\n\n\n",{"_58":505,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/609/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/609/timeline",{"_58":508,"_60":61,"_62":509,"_64":510,"_66":511,"_68":512,"_70":513,"_72":514,"_74":515,"_76":516,"_78":517,"_111":518,"_131":132,"_133":24,"_134":-5,"_135":521,"_137":522,"_159":152,"_153":524,"_155":500,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":525,"_169":526,"_175":527,"_177":528,"_189":530,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/608","https://api.github.com/repos/pro-collection/interview-question/issues/608/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/608/comments","https://api.github.com/repos/pro-collection/interview-question/issues/608/events","https://github.com/pro-collection/interview-question/issues/608",1970769874,"I_kwDOJGDC6c51d4_S",608,"[Webpack] 有哪些基础概念【热度: 595】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[519,520],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":487,"_68":488,"_62":489,"_70":490,"_72":491,"_74":492,"_76":493,"_122":494,"_147":523,"_149":496,"_151":152,"_131":132,"_153":497,"_155":498,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-31T15:48:20Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：webpack 作用、webpack 概念\n\nWebpack是一个现代的JavaScript模块打包工具，它的核心概念包括以下几个方面：\n\n1. 入口（Entry）：指定Webpack开始构建依赖图谱的起点。可以通过配置文件中的entry属性来指定入口文件，也可以指定多个入口文件。\n\n2. 输出（Output）：指定Webpack打包后的文件输出的路径和文件名。可以通过配置文件中的output属性来定义输出路径和文件名的规则。\n\n3. 加载器（Loader）：Webpack本身只能处理JavaScript文件，通过加载器，Webpack可以处理其他类型的文件，如CSS、图片、字体等。加载器会在打包过程中对文件进行转换和处理。\n\n4. 插件（Plugin）：插件是Webpack的核心功能扩展机制，可以用于解决很多构建过程中的复杂问题或实现特定的需求。插件可以用于优化打包结果、自动生成HTML文件、提取CSS文件等。\n\n5. 模式（Mode）：Webpack提供了两种模式，分别是开发模式（development）和生产模式（production）。开发模式会启用一些有助于开发调试的功能，而生产模式则会启用代码压缩、优化等功能。\n\n6. 代码分割（Code Splitting）：Webpack支持将代码分割成多个块，实现按需加载和提高应用性能。可以使用动态导入、SplitChunks插件等方式进行代码分割。\n\n7. 解析（Resolve）：Webpack会解析模块之间的依赖关系，通过解析规则来确定模块的依赖关系。可以通过配置resolve属性来设置模块的解析规则。\n\n**参考文档** \n\nhttps://webpack.docschina.org/concepts/\n",{"_58":529,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/608/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/608/timeline",{"_58":532,"_60":61,"_62":533,"_64":534,"_66":535,"_68":536,"_70":537,"_72":538,"_74":539,"_76":540,"_78":541,"_111":542,"_131":132,"_133":24,"_134":-5,"_135":545,"_137":546,"_159":152,"_153":548,"_155":549,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":550,"_169":551,"_175":552,"_177":553,"_189":555,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/607","https://api.github.com/repos/pro-collection/interview-question/issues/607/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/607/comments","https://api.github.com/repos/pro-collection/interview-question/issues/607/events","https://github.com/pro-collection/interview-question/issues/607",1970757798,"I_kwDOJGDC6c51d2Cm",607,"[Webpack] 为什么选择 webpack？【热度: 515】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[543,544],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":547,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-31T15:41:57Z","2023-11-01T14:57:33Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：webpack 作用\r\n\r\n**为什么选择 webpack**\r\n\r\n想要理解为什么要使用 webpack，我们先回顾下历史，在打包工具出现之前，我们是如何在 web 中使用 JavaScript 的。\r\n\r\n在浏览器中运行 JavaScript 有两种方法。第一种方式，引用一些脚本来存放每个功能；此解决方案很难扩展，因为加载太多脚本会导致网络瓶颈。第二种方式，使用一个包含所有项目代码的大型 .js 文件，但是这会导致作用域、文件大小、可读性和可维护性方面的问题。\r\n\r\n**立即调用函数表达式(IIFE) - Immediately invoked function expressions**\r\n\r\nIIFE 解决大型项目的作用域问题；当脚本文件被封装在 IIFE 内部时，你可以安全地拼接或安全地组合所有文件，而不必担心作用域冲突。\r\n\r\nIIFE 使用方式产生出 Make, Gulp, Grunt, Broccoli 或 Brunch 等工具。这些工具称为任务执行器，它们将所有项目文件拼接在一起。\r\n\r\n但是，修改一个文件意味着必须重新构建整个文件。拼接可以做到很容易地跨文件重用脚本，但是却使构建结果的优化变得更加困难。如何判断代码是否实际被使用？\r\n\r\n即使你只用到 lodash 中的某个函数，也必须在构建结果中加入整个库，然后将它们压缩在一起。如何 treeshake 代码依赖？难以大规模地实现延迟加载代码块，这需要开发人员手动地进行大量工作。\r\n\r\n**感谢 Node.js，JavaScript 模块诞生了**\r\n\r\nNode.js 是一个 JavaScript 运行时，可以在浏览器环境之外的计算机和服务器中使用。webpack 运行在 Node.js 中。\r\n\r\n当 Node.js 发布时，一个新的时代开始了，它带来了新的挑战。既然不是在浏览器中运行 JavaScript，现在已经没有了可以添加到浏览器中的 html 文件和 script 标签。那么 Node.js 应用程序要如何加载新的代码 chunk 呢？\r\n\r\nCommonJS 问世并引入了 require 机制，它允许你在当前文件中加载和使用某个模块。导入需要的每个模块，这一开箱即用的功能，帮助我们解决了作用域问题。\r\n\r\nnpm + Node.js + modules - 大规模分发模块\r\nJavaScript 已经成为一种语言、一个平台和一种快速开发和创建快速应用程序的方式，接管了整个 JavaScript 世界。\r\n\r\n但 CommonJS 没有浏览器支持。没有 live binding(实时绑定)。循环引用存在问题。同步执行的模块解析加载器速度很慢。虽然 CommonJS 是 Node.js 项目的绝佳解决方案，但浏览器不支持模块，因而产生了 Browserify, RequireJS 和 SystemJS 等打包工具，允许我们编写能够在浏览器中运行的 CommonJS 模块。\r\n\r\n**ESM - ECMAScript 模块**\r\n来自 Web 项目的好消息是，模块正在成为 ECMAScript 标准的官方功能。然而，浏览器支持不完整，版本迭代速度也不够快，目前还是推荐上面那些早期模块实现。\r\n\r\n**依赖自动收集**\r\n传统的任务构建工具基于 Google 的 Closure 编译器都要求你手动在顶部声明所有的依赖。然而像 webpack 一类的打包工具自动构建并基于你所引用或导出的内容推断出依赖的图谱。这个特性与其它的如插件 and 加载器一道让开发者的体验更好。\r\n\r\n**看起来都不是很好……**\r\n\r\n`是否可以有一种方式，不仅可以让我们编写模块，而且还支持任何模块格式（至少在我们到达 ESM 之前），并且可以同时处理资源和资产？`\r\n\r\n这就是 webpack 存在的原因。它是一个工具，可以打包你的 JavaScript 应用程序（支持 ESM 和 CommonJS），可以扩展为支持许多不同的静态资源，例如：images, fonts 和 stylesheets。\r\n\r\nwebpack 关心性能和加载时间；它始终在改进或添加新功能，例如：异步地加载 chunk 和预取，以便为你的项目和用户提供最佳体验。\r\n\r\n\r\n\r\n**参考文档**\r\nhttps://webpack.docschina.org/concepts/why-webpack/",{"_58":554,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/607/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/607/timeline",{"_58":557,"_60":61,"_62":558,"_64":559,"_66":560,"_68":561,"_70":562,"_72":563,"_74":564,"_76":565,"_78":566,"_111":567,"_131":132,"_133":24,"_134":-5,"_135":570,"_137":571,"_159":152,"_153":573,"_155":574,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":575,"_169":576,"_175":577,"_177":578,"_189":580,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/606","https://api.github.com/repos/pro-collection/interview-question/issues/606/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/606/comments","https://api.github.com/repos/pro-collection/interview-question/issues/606/events","https://github.com/pro-collection/interview-question/issues/606",1970750867,"I_kwDOJGDC6c51d0WT",606,"[Webpack] chunk 是什么概念，介绍一下？【热度: 1,100】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[568,569],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":572,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-31T15:38:22Z","2023-11-01T14:57:32Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"在Webpack中，Chunk（代码块）是指Webpack在构建过程中生成的一个或多个独立的文件，它包含了一组相关的模块。每个Chunk都有一个唯一的标识符，可以通过该标识符来访问和加载对应的Chunk。\n\nWebpack根据指定的入口文件和依赖关系图来确定需要生成哪些Chunk。入口文件是Webpack构建的起点，而依赖关系图描述了每个模块之间的依赖关系。Webpack根据这些信息将模块分割为不同的代码块，并生成相应的Chunk。\n\n**Chunk的主要作用是实现代码的分割和按需加载**。通过将代码拆分为多个Chunk，Webpack可以进行按需加载，只有在需要时才加载对应的Chunk，从而减少了初始加载的大小和时间。这样可以提高应用程序的性能和加载速度。\n\nWebpack提供了多种代码分割的方式，包括使用入口配置、使用动态导入语法（如import()）和使用Webpack插件（如SplitChunksPlugin）。这些方式可以帮助开发者将代码分割为不同的Chunk，并根据实际需求进行配置和优化。\n\n具体而言，Webpack的代码分割机制通过两种方式来创建chunk：\n\n1. 静态代码分割（Static Code Splitting）：在Webpack配置中使用`splitChunks`或`optimization.splitChunks`选项，可以将第三方库、公共模块或重复的模块分割成独立的chunk。这些chunk可以在多个入口文件之间共享，从而减少重复加载的代码。\n\n2. 动态代码分割（Dynamic Code Splitting）：通过使用动态导入（Dynamic Import）语法，可以将应用程序的不同部分分割成独立的chunk。例如，在React中可以使用`React.lazy()`函数和`Suspense`组件来实现动态导入和渲染。\n\n分割成的chunk可以通过Webpack的内置功能（如代码分割插件、懒加载等）实现按需加载，即当需要时才加载对应的chunk，从而减少初始加载时间并提高网页性能。\n\n通过使用chunk，Webpack可以自动将代码分割成更小的部分，实现按需加载和并行加载，从而提高应用程序的性能和用户体验。\n",{"_58":579,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/606/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/606/timeline",{"_58":582,"_60":61,"_62":583,"_64":584,"_66":585,"_68":586,"_70":587,"_72":588,"_74":589,"_76":590,"_78":591,"_111":592,"_131":132,"_133":24,"_134":-5,"_135":601,"_137":602,"_159":152,"_153":604,"_155":605,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":606,"_169":607,"_175":608,"_177":609,"_189":611,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/605","https://api.github.com/repos/pro-collection/interview-question/issues/605/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/605/comments","https://api.github.com/repos/pro-collection/interview-question/issues/605/events","https://github.com/pro-collection/interview-question/issues/605",1966916474,"I_kwDOJGDC6c51PMN6",605,"[微前端] 路由加载流程是如何的？【热度: 971】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[593,600],{"_70":594,"_72":595,"_58":596,"_117":597,"_119":598,"_121":24,"_122":599},5252532904,"LA_kwDOJGDC6c8AAAABORNKqA","https://api.github.com/repos/pro-collection/interview-question/labels/web%E6%A1%86%E6%9E%B6","web框架","CB446E","web 框架相关知识",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":603,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-29T09:41:29Z","2023-10-31T15:44:19Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：微前端路由加载\n\n微前端是一种架构模式，旨在将大型前端应用程序拆分为更小、更容易维护的独立部分。微前端的路由原理可以通过以下步骤概括：\n\n1. 主应用加载：用户访问主应用时，主应用负责加载，并决定加载哪些微前端应用。\n\n2. 路由分发：主应用根据当前URL路径，将请求分发给相应的微前端应用。\n\n3. 微前端应用加载：被分发的微前端应用根据接收到的请求加载自己的代码和资源。\n\n4. 渲染内容：微前端应用接收到请求后，将自己的内容渲染到主应用的容器中。\n\n5. 子应用间通信：如果不同微前端应用之间需要进行通信，可以使用共享的状态管理工具或事件总线。\n\n6. 事件处理：主应用和微前端应用都可以处理路由变化事件，以便更新页面内容。\n",{"_58":610,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/605/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/605/timeline",{"_58":613,"_60":61,"_62":614,"_64":615,"_66":616,"_68":617,"_70":618,"_72":619,"_74":620,"_76":621,"_78":622,"_111":623,"_131":132,"_133":24,"_134":-5,"_135":626,"_137":627,"_159":152,"_153":629,"_155":629,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":630,"_169":631,"_175":632,"_177":633,"_189":635,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/604","https://api.github.com/repos/pro-collection/interview-question/issues/604/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/604/comments","https://api.github.com/repos/pro-collection/interview-question/issues/604/events","https://github.com/pro-collection/interview-question/issues/604",1966911404,"I_kwDOJGDC6c51PK-s",604,"[微前端] 设计原则有哪些？【热度: 1,060】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[624,625],{"_70":594,"_72":595,"_58":596,"_117":597,"_119":598,"_121":24,"_122":599},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":628,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-29T09:24:30Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：微前端设计原则\n\n《微前端设计与实现》一书中作者卢卡·梅扎利拉提出的关于微前端的实践原则。一共有七条原则，这些原则可以帮助团队更好地设计和实施微前端架构。\n\n- 围绕业务领域建模：将前端应用程序按照业务领域进行划分，每个微前端子应用负责一个特定的业务领域。这样可以提高团队的独立性和聚焦性，降低开发和维护的复杂性。\n\n- 自动化文化：建立自动化的开发和部署流程，包括自动化测试、持续集成和持续部署。这样可以提高开发效率和质量，并且减少人为错误。\n\n- 隐藏实现细节：将微前端子应用的实现细节隐藏起来，提供简单的接口供其他子应用或者外部系统调用。这样可以减少依赖和耦合，提高系统的灵活性和可扩展性。\n\n- 分布式治理：微前端架构中的各个子应用可以由不同的团队负责开发和维护。需要建立一套分布式治理机制，包括版本控制、协作沟通和问题解决等，保证各个子应用能够有效地协同工作。\n\n- 独立部署：每个微前端子应用都可以独立地进行开发、测试和部署，而不会影响其他子应用。这样可以提高团队的独立性和灵活性，并且减少不同团队之间的交互和依赖。\n\n- 故障隔离：微前端架构中的一个子应用出现故障时，不会影响其他子应用的正常运行。需要建立故障隔离机制，确保故障的影响范围最小化。\n\n- 高度可观察：需要建立合适的监控和日志系统，对微前端架构中的各个子应用进行监测和分析。这样可以提前发现问题并进行及时处理，保证系统的稳定性和可靠性。\n\n",{"_58":634,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/604/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/604/timeline",{"_58":637,"_60":61,"_62":638,"_64":639,"_66":640,"_68":641,"_70":642,"_72":643,"_74":644,"_76":645,"_78":646,"_111":647,"_131":132,"_133":24,"_134":-5,"_135":650,"_137":651,"_159":152,"_153":653,"_155":653,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":654,"_169":655,"_175":656,"_177":657,"_189":659,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/603","https://api.github.com/repos/pro-collection/interview-question/issues/603/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/603/comments","https://api.github.com/repos/pro-collection/interview-question/issues/603/events","https://github.com/pro-collection/interview-question/issues/603",1966907554,"I_kwDOJGDC6c51PKCi",603,"为何现在市面上做表格渲染可视化技术的，大多数都是 canvas ，而很少用 svg 的？【热度: 302】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[648,649],{"_70":250,"_72":251,"_58":252,"_117":253,"_119":254,"_121":24,"_122":255},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":652,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-29T09:11:42Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：canvas使用场景、canvas可视化、svg使用场景\n\n都用上了可视化技术做渲染，在这个场景下，大多数考虑的是性能；\n\n所以主要基于几个方面去衡量技术方案的选择：性能、动态交互、复杂图形支持\n\n- 性能：Canvas 通常比 SVG 具有更好的性能。Canvas 是基于像素的绘图技术，而 SVG 是基于矢量的绘图技术。由于 Canvas 的绘图是直接操作像素，所以在大规模绘制大量图形时，Canvas 的性能优势更为明显。而 SVG 生成的图形是由 DOM 元素组成，每个元素都要进行布局和绘制，因此在处理大量图形时会有性能瓶颈。\n\n- 动态交互：Canvas 更适合处理动态交互。由于 Canvas 绘制的图形是像素级别的，可以直接对图形进行像素级别的操作，可以方便地进行复杂的动画和交互效果。而 SVG 的图形是由 DOM 元素组成的，每个元素都要进行布局和绘制，所以在处理复杂的动态交互时，性能方面可能会受到限制。\n\n- 复杂图形支持：Canvas 更适合处理复杂的图形。由于 Canvas 是像素级别的绘制，可以直接操作像素，因此可以实现更加灵活和复杂的图形效果，比如阴影、渐变等。而 SVG 的图形是基于矢量的，相对来说对复杂图形的支持可能会有一些限制。\n\n**追问**： `canvas 和 svg 在动态交互上有什么具体的区别？`\n\n元素操作：在 Canvas 中，绘制的图形被视为位图，无法直接访问和操作单个元素，需要通过 JavaScript 对整个画布进行操作。而在 SVG 中，每个图形元素都是 DOM 元素，可以直接访问和操作单个元素，比如修改属性、绑定事件等。\n\n**真是场景**：比如在 table 开发场景下， svg 能通过元素进行事件绑定进行用户操作事件驱动，比较方便，但是同样的用户操作，用 canvas 去驱动，显得并不是那么的方便。这个问题 canvas 是如何解决的？\n\n在 `Table` 开发场景下，SVG 确实更适合进行事件绑定和用户操作事件驱动。使用 SVG，可以直接操作每个图形元素，为其绑定事件处理程序，实现用户交互。\n\n而 `Canvas` 在处理用户操作事件驱动方面相对不太方便，因为 `Canvas` 绘制的是位图，并不直接支持事件绑定。但是可以通过以下方式解决这个问题：\n\n- 通过将 Canvas 元素放置在 HTML 元素之上，再利用 CSS 控制其位置和尺寸，实现与用户交互的感觉。然后通过监听 HTML 元素的事件，通过 JavaScript 判断用户操作的位置与 Canvas 上的图形元素是否相交，从而模拟出用户交互的效果。\n\n- 使用第三方库或框架，如 `Fabric.js、Konva.js` 等，它们提供了更高级的 API 和事件系统，使得在 Canvas 上进行用户交互更加方便。这些库可以处理用户操作事件，检测点击、拖拽、缩放等交互操作，并提供了事件绑定和管理的方法。\n\n通过以上方式，可以在 Canvas 中实现一些基本的用户交互，但相比于 SVG 来说，Canvas 的事件处理和用户交互仍然相对繁琐一些。所以在需要大量的用户交互和事件处理的情况下，SVG 仍然是更好的选择。\n\n**追问**： `canvas 如何更为方便的提供事件处理能力？因为 canvas 不能进行事件绑定等，显得就非常的不方便`\n\n在 Canvas 中提供事件处理能力，可以通过以下两种方式更为方便：\n\n1. 使用第三方库或框架：有一些流行的 Canvas 框架可以帮助简化事件处理，例如 Fabric.js、Konva.js 和 EaselJS 等。这些库封装了 Canvas 的底层API，提供了更高级的事件系统和方法，可以轻松地为图形元素绑定事件处理程序，实现用户交互。\n\n2. 手动实现事件处理：通过监听 HTML 元素的事件（例如鼠标点击、移动、滚轮等），再结合 Canvas 的绘制和坐标计算，可以手动实现事件处理。以下是基本的步骤：\n - 获取鼠标或触摸事件的坐标。\n - 判断坐标是否在 Canvas 绘制区域内。\n - 找到被点击的图形元素（如果有）。\n - 根据事件类型执行相应的操作，如拖拽、缩放、点击等。\n\n**追问**: `Fabric.js 是如何进行 canvas 底层事件 api 的封装的？`\n\n`Fabric.js` 是一个强大的 Canvas 库，它在提供图形绘制和交互能力的同时，也封装了 Canvas 的底层事件 API，简化了事件处理的流程。下面是 `Fabric.js` 如何封装 `Canvas` 底层事件 API 的一些主要方式：\n\n1. 事件监听：`Fabric.js` 提供了 `on` 方法，用于在 Canvas 上注册事件处理程序。可以监听各种事件，如鼠标点击、移动、滚动、键盘事件等。通过这个方法，可以为整个 `Canvas` 或图形元素绑定事件。\n \n2. 事件对象：在事件处理程序中，`Fabric.js` 将底层事件对象进行封装，提供了一个更高级的事件对象（`fabric.Event`），其中包含了更多有用的信息，如事件类型、触发坐标、关联的图形对象等。\n\n3. 坐标转换：`Fabric.js` 提供了一系列的方法来处理坐标转换，使得事件处理更加方便。可以通过 `getPointer` 方法获取相对于 Canvas 的坐标，通过 `localToGlobal` 和 `globalToLocal` 方法在不同坐标系之间进行转换。\n\n4. 交互操作：`Fabric.js` 提供了一些方便的方法来处理用户交互，如拖拽、缩放、旋转等。通过 `dragging`、`scaling`、`rotating` 等属性和方法，可以轻松地实现这些交互操作，并在事件处理程序中进行相应的处理。\n\n",{"_58":658,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/603/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/603/timeline",{"_58":661,"_60":61,"_62":662,"_64":663,"_66":664,"_68":665,"_70":666,"_72":667,"_74":668,"_76":669,"_78":670,"_111":671,"_131":132,"_133":24,"_134":-5,"_135":679,"_137":680,"_159":152,"_153":682,"_155":683,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":684,"_169":685,"_175":686,"_177":687,"_189":689,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/601","https://api.github.com/repos/pro-collection/interview-question/issues/601/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/601/comments","https://api.github.com/repos/pro-collection/interview-question/issues/601/events","https://github.com/pro-collection/interview-question/issues/601",1955517666,"I_kwDOJGDC6c50jtTi",601,"[代码实现] 手写数组降维flat方法【热度: 244】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[672,673],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":674,"_72":675,"_58":676,"_117":677,"_119":309,"_121":24,"_122":678},5931045040,"LA_kwDOJGDC6c8AAAABYYSQsA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0/%E7%AE%97%E6%B3%95","代码实现/算法","代码实现或者算法实现",[],{"_58":487,"_68":488,"_62":489,"_70":490,"_72":491,"_74":492,"_76":493,"_122":494,"_147":681,"_149":496,"_151":152,"_131":132,"_153":497,"_155":498,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-21T14:35:10Z","2023-10-21T14:35:26Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：JS数组降维、reduce数组降维\n\n原生Array.prototype.flat方法接受一个depth参数，默认值为1，depth表示要降维的维数：\n\n输出结果：\n\n```js\nconst arr = [1, [2, 3], [4, [5, 6]]]\nconsole.log(arr.flat(1)) // [1, 2, 3, 4, [5, 6]]\nconsole.log(arr.flat(Infinity)) // [1, 2, 3, 4, 5, 6]\n```\n\nreduce + 递归实现方案\n\n```js\n// MDN: 可查看更多flat实现方法\nfunction flat(arr = [], depth = 1) {\n if (arr.length === 0) {\n return []\n }\n let result = []\n if (depth > 0) {\n result = arr.reduce((acc, val) => {\n return acc.concat(Array.isArray(val) ? flat(val, depth - 1) : val)\n }, [])\n } else {\n result = arr.slice()\n }\n return result\n}\n\nconst arr = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]]\nconst myResult1 = flat(arr, 1)\nconst originResult1 = arr.flat(1)\nconst myResult2 = flat(arr, Infinity)\nconst originResult2 = arr.flat(Infinity)\nconsole.log(myResult1) // [1, 2, 3, 1, 2, 3, 4, [2, 3, 4]]\nconsole.log(originResult1) // [1, 2, 3, 1, 2, 3, 4, [2, 3, 4]]\nconsole.log(myResult2) // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]\nconsole.log(originResult2) // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]\n```\n\n",{"_58":688,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/601/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/601/timeline",{"_58":691,"_60":61,"_62":692,"_64":693,"_66":694,"_68":695,"_70":696,"_72":697,"_74":698,"_76":699,"_78":700,"_111":701,"_131":132,"_133":24,"_134":-5,"_135":704,"_137":705,"_159":152,"_153":707,"_155":708,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":709,"_169":710,"_175":711,"_177":712,"_189":714,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/600","https://api.github.com/repos/pro-collection/interview-question/issues/600/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/600/comments","https://api.github.com/repos/pro-collection/interview-question/issues/600/events","https://github.com/pro-collection/interview-question/issues/600",1955506343,"I_kwDOJGDC6c50jqin",600,"[代码实现] 手写 dom 分段渲染【热度: 280】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[702,703],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":674,"_72":675,"_58":676,"_117":677,"_119":309,"_121":24,"_122":678},[],{"_58":487,"_68":488,"_62":489,"_70":490,"_72":491,"_74":492,"_76":493,"_122":494,"_147":706,"_149":496,"_151":152,"_131":132,"_153":497,"_155":498,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-21T14:05:34Z","2023-10-21T14:06:42Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：dom 分段渲染\n\n分时函数案例：把1秒创建1000个DOM节点，改成每隔200毫秒创建10个节点，这样不用短时间在页面中创建大量的DOM。\n\n```jsx\nvar timeChunk = function(arr,fn,count,interval) {\n var timer = null;\n var data = null;\n var start = function() {\n for(var i = 0 ; i < Math.min(count || 1 , arr.length) ; i++) {\n fn(arr.shift());\n }\n }\n return function() {\n timer = setInterval(function(){\n if(arr.length == 0) {\n clearInterval(timer);\n timer = null;\n return;\n }\n start();\n }, interval || 200)\n }\n}\n\nvar arr = [];\nfor(var i = 0 ; i < 1000 ; i++) {\n arr.push(i);\n}\n\nvar renderDOMList = timeChunk(arr, function(data) {\n var div = document.createElement('div');\n div.innerHTML = data;\n document.body.appendChild(div);\n},10,200);\nrenderDOMList();\n```\n",{"_58":713,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/600/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/600/timeline",{"_58":716,"_60":61,"_62":717,"_64":718,"_66":719,"_68":720,"_70":721,"_72":722,"_74":723,"_76":724,"_78":725,"_111":726,"_131":132,"_133":24,"_134":-5,"_135":729,"_137":730,"_159":152,"_153":732,"_155":733,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":734,"_169":735,"_175":736,"_177":737,"_189":739,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/595","https://api.github.com/repos/pro-collection/interview-question/issues/595/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/595/comments","https://api.github.com/repos/pro-collection/interview-question/issues/595/events","https://github.com/pro-collection/interview-question/issues/595",1943863500,"I_kwDOJGDC6c5z3QDM",595,"[Vue] 响应式为何要从 Object.defineProperty 改为 proxy?【热度: 352】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[727,728],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":487,"_68":488,"_62":489,"_70":490,"_72":491,"_74":492,"_76":493,"_122":494,"_147":731,"_149":496,"_151":152,"_131":132,"_153":497,"_155":498,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-15T12:09:41Z","2023-10-15T12:09:42Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue Object.defineProperty、vue proxy 使用\n\nVue 在早期版本中使用了 `Object.defineProperty` 来实现响应式系统。但是，在 `Object.defineProperty` 中存在一些限制和局限性，导致在某些场景下无法完全满足需求。因此，Vue 在最新的版本中引入了 `Proxy` 来替代 `Object.defineProperty`。\n\n以下是一些 `Proxy` 相对于 `Object.defineProperty` 的优势：\n\n1. 功能更强大：`Proxy` 可以代理整个对象，而 `Object.defineProperty` 只能对已存在的属性进行拦截。使用 `Proxy` 可以在对象级别上进行拦截、代理、验证等操作。\n\n2. 更易于使用和理解：`Proxy` 提供了一组更直观和易于理解的 API，使开发者可以更容易地创建和管理代理。\n\n3. 性能优化：`Proxy` 针对属性的访问和修改都提供了更佳的性能优化。而 `Object.defineProperty` 在拦截属性访问和修改时会有一定的性能损耗。\n\n4. 更好的嵌套支持：`Proxy` 可以代理嵌套对象的属性，而 `Object.defineProperty` 只能对顶层对象的属性进行拦截。\n\n总的来说，`Proxy` 相对于 `Object.defineProperty` 在功能上更强大、使用更便捷、性能更优，并且在更复杂的场景下也能提供更好的支持。因此，Vue 在新版本中选择了使用 `Proxy` 来实现响应式系统。\n",{"_58":738,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/595/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/595/timeline",{"_58":741,"_60":61,"_62":742,"_64":743,"_66":744,"_68":745,"_70":746,"_72":747,"_74":748,"_76":749,"_78":750,"_111":751,"_131":132,"_133":24,"_134":-5,"_135":754,"_137":755,"_159":152,"_153":757,"_155":758,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":759,"_169":760,"_175":761,"_177":762,"_189":764,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/594","https://api.github.com/repos/pro-collection/interview-question/issues/594/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/594/comments","https://api.github.com/repos/pro-collection/interview-question/issues/594/events","https://github.com/pro-collection/interview-question/issues/594",1927311094,"I_kwDOJGDC6c5y4G72",594,"在你的项目中，使用过哪些 webpack plugin, 说一下他们的作用【热度: 361】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[752,753],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":756,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-05T03:28:31Z","2023-10-05T03:29:18Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"下表列出了常见的 Webpack 插件及其作用：\n\n| 插件名称 | 作用 |\n| ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- |\n| `HtmlWebpackPlugin` | 自动生成 HTML 文件，并将打包后的资源自动注入到 HTML 中。 |\n| `MiniCssExtractPlugin` | 将 CSS 代码提取到单独的文件中，而不是内联到 JavaScript 中。 |\n| `CopyWebpackPlugin` | 将指定的文件或目录复制到输出目录。 |\n| `CleanWebpackPlugin` | 在每次构建之前清理输出目录，避免旧的文件残留。 |\n| `DefinePlugin` | 在编译过程中创建全局常量，可以在代码中直接使用。 |\n| `HotModuleReplacementPlugin` | 启用热模块更换（Hot Module Replacement），在开发过程中实现代码修改后实时更新页面，无需刷新。 |\n| `ProvidePlugin` | 自动加载模块，使模块在使用时可以直接使用对应的全局变量，无需引入。 |\n| `MiniCssExtractPlugin` | 将 CSS 代码提取到单独的文件中，而不是内联到 JavaScript 中。 |\n| `OptimizeCSSAssetsPlugin` | 压缩提取出的 CSS 文件。 |\n| `uglifyjs-webpack-plugin` | 压缩 JavaScript 代码。 |\n| `webpack-bundle-analyzer` | 分析打包后的文件大小，并可视化展示，方便优化打包结果。 |\n| `CompressionWebpackPlugin` | 使用 gzip 或其他压缩算法对文件进行压缩，减小文件大小，加快网络传输速度。 |\n| `CopyWebpackPlugin` | 将指定的文件或目录复制到输出目录。 |\n| `FriendlyErrorsWebpackPlugin` | 提供友好的构建错误提示和优化构建速度的功能。 |\n| `ImageminWebpackPlugin` | 压缩图片资源，减小文件大小，提升加载速度。 |\n| `HotModuleReplacementPlugin` | 启用热模块更换（Hot Module Replacement），在开发过程中实现代码修改后实时更新页面，无需刷新。 |\n| `HtmlWebpackPlugin` | 自动生成 HTML 文件，并将打包后的资源自动注入到 HTML 中。 |\n| `IgnorePlugin` | 忽略特定的模块，避免将其打包到最终的输出文件中。 |\n| `BannerPlugin` | 在打包的文件块顶部添加自定义的注释和信息。 |\n| `webpack.DefinePlugin` | 在编译过程中创建全局常量，可以在代码中直接使用。 |\n| `webpack.ProgressPlugin` | 在控制台输出构建进度信息。 |\n| `webpack-bundle-analyzer` | 分析打包后的文件大小，并可视化展示，方便优化打包结果。 |\n| `webpackbar` | 在命令行中显示构建进度条，提供更直观的构建进度信息。 |\n\n这些插件可以根据需要配置在 Webpack 的插件列表（`plugins`）中，以实现对构建过程的各种增强和优化操作。\n",{"_58":763,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/594/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/594/timeline",{"_58":766,"_60":61,"_62":767,"_64":768,"_66":769,"_68":770,"_70":771,"_72":772,"_74":773,"_76":774,"_78":775,"_111":776,"_131":132,"_133":24,"_134":-5,"_135":779,"_137":780,"_159":152,"_153":782,"_155":783,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":784,"_169":785,"_175":786,"_177":787,"_189":789,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/593","https://api.github.com/repos/pro-collection/interview-question/issues/593/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/593/comments","https://api.github.com/repos/pro-collection/interview-question/issues/593/events","https://github.com/pro-collection/interview-question/issues/593",1927307299,"I_kwDOJGDC6c5y4GAj",593,"在你的项目中，使用过哪些 webpack loader, 说一下他们的作用【热度: 361】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[777,778],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":781,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-05T03:22:49Z","2023-10-05T03:23:20Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"| Loader 名称 | 作用 |\n| --------------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| `babel-loader` | 将 ES6+ 代码转换为 ES5 代码，以便在旧版浏览器中运行。 |\n| `css-loader` | 解析 CSS 文件，处理 CSS 中的依赖关系，并将 CSS 转换为 JS 模块。 |\n| `style-loader` | 将 CSS 代码以内联的方式注入到 HTML 页面中。 |\n| `file-loader` | 处理文件资源（如图片、字体等），将文件复制到输出目录，并返回文件路径。 |\n| `url-loader` | 与 `file-loader` 类似，但可以根据文件大小将文件转换为 Data URL（base64 格式）或文件路径。 |\n| `sass-loader` | 解析 Sass/SCSS 文件，并将其转换为 CSS 代码。 |\n| `less-loader` | 解析 Less 文件，并将其转换为 CSS 代码。 |\n| `postcss-loader` | 使用 PostCSS 处理 CSS，可以进行自动添加前缀、压缩、CSS Modules 等操作。 |\n| `ts-loader` | 将 TypeScript 代码转换为 JavaScript 代码。 |\n| `eslint-loader` | 在构建过程中使用 ESLint 进行代码检查。 |\n| `stylelint-webpack-plugin` | 在构建过程中使用 Stylelint 进行 CSS/SCSS 代码检查。 |\n| `vue-loader` | 解析 Vue 单文件组件（.vue 文件），并将其转换为 JavaScript 代码。 |\n| `image-webpack-loader` | 优化图片资源，包括压缩、转换格式等操作。 |\n| `html-loader` | 解析 HTML 文件，处理其中的引用资源（如图片、字体等），并返回处理后的 HTML 代码。 |\n| `markdown-loader` | 将 Markdown 文件转换为 HTML 代码。 |\n| `json-loader` | 解析 JSON 文件，并返回解析后的 JavaScript 对象。 |\n| `eslint-loader` | 在构建过程中使用 ESLint 进行代码检查。 |\n| `tslint-loader` | 在构建过程中使用 TSLint 进行 TypeScript 代码检查。 |\n| `prettier-loader` | 在构建过程中使用 Prettier 进行代码格式化。 |\n| `stylelint-webpack-plugin` | 在构建过程中使用 Stylelint 进行 CSS/SCSS 代码检查。 |\n| `mini-css-extract-plugin` | 提取 CSS 代码到单独的文件，而不是内联到 JavaScript 代码中。 |\n| `optimize-css-assets-webpack-plugin` | 压缩 CSS 代码。 |\n| `terser-webpack-plugin` | 压缩 JavaScript 代码。 |\n\n这些 Loader 可以根据需要配置在 Webpack 的模块规则（`module.rules`）中，以实现对不同类型文件的处理和转换操作。\n",{"_58":788,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/593/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/593/timeline",{"_58":791,"_60":61,"_62":792,"_64":793,"_66":794,"_68":795,"_70":796,"_72":797,"_74":798,"_76":799,"_78":800,"_111":801,"_131":132,"_133":24,"_134":-5,"_135":804,"_137":805,"_159":152,"_153":807,"_155":808,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":809,"_169":810,"_175":811,"_177":812,"_189":814,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/587","https://api.github.com/repos/pro-collection/interview-question/issues/587/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/587/comments","https://api.github.com/repos/pro-collection/interview-question/issues/587/events","https://github.com/pro-collection/interview-question/issues/587",1921221358,"I_kwDOJGDC6c5yg4Lu",587,"[React] 如何实现转场动画？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[802,803],{"_70":594,"_72":595,"_58":596,"_117":597,"_119":598,"_121":24,"_122":599},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":806,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-02T04:20:26Z","2023-10-02T04:21:05Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"这个问题非常复杂，我这边用白话文解释一下原理，若有不对的地方，请大家更正：\n\n如果没有专场动画，那么在路由切换的一瞬间，加载下一个路由页面的组件，注销上一个路由页面的组件；\n\n但是如果加上专场动画，比如专场动画时间为 500ms，那么，在咋合格 500ms 过程中，首先要加载下一个路由页面的组件，然后加载上一个渐进的动画。 \n同时不能注销掉当前路由，需要给当前路由加载一个渐出的动画。 \n需要当两个页面完成动画时间，完成页面覆盖切换之后，然后注销上一个路由页面的组件；\n\n所以涉及到的知识点：\n1. 如何做页面跳转拦截；\n2. 如何在页面路由组件不跳转的同时，加载下一个页面的组件；\n3. 配置页面层级；\n3. 如何执行、加载、完成专场动画；\n4. 动画结束的时候手动注销组件；\n\n具体实现，可以参考以下两个文档：\n\n- https://github.com/SmallStoneSK/Blog/issues/8\n- https://juejin.cn/post/6887471865720209415\n\n",{"_58":813,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/587/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/587/timeline",{"_58":816,"_60":61,"_62":817,"_64":818,"_66":819,"_68":820,"_70":821,"_72":822,"_74":823,"_76":824,"_78":825,"_111":826,"_131":132,"_133":24,"_134":-5,"_135":829,"_137":830,"_159":194,"_153":832,"_155":833,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":834,"_169":835,"_175":836,"_177":837,"_189":839,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/586","https://api.github.com/repos/pro-collection/interview-question/issues/586/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/586/comments","https://api.github.com/repos/pro-collection/interview-question/issues/586/events","https://github.com/pro-collection/interview-question/issues/586",1921199467,"I_kwDOJGDC6c5ygy1r",586,"[React] react router 主要包有哪些，主要 api 有哪些？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[827,828],{"_70":594,"_72":595,"_58":596,"_117":597,"_119":598,"_121":24,"_122":599},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":487,"_68":488,"_62":489,"_70":490,"_72":491,"_74":492,"_76":493,"_122":494,"_147":831,"_149":496,"_151":152,"_131":132,"_153":497,"_155":498,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-02T03:48:12Z","2023-10-02T03:48:40Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"React Router是React官方提供的用于构建单页应用的路由库，主要包括以下几个主要包和API：\n\n主要包：\n1. react-router-dom：用于Web应用的路由库。\n2. react-router-native：用于原生应用（如React Native）的路由库。\n3. react-router-config：用于配置静态路由的工具包。\n\n主要API：\n1. BrowserRouter：一个使用HTML5 history API实现的路由器组件，用于在Web应用中处理路由。\n2. HashRouter：一个使用URL hash值实现的路由器组件，用于在不支持HTML5 history API的Web应用中处理路由。\n3. Route：定义了路由匹配规则及对应的组件，可以在路由器中使用。\n4. Switch：用于渲染与当前URL匹配的第一个Route或Redirect，只能包含Route或Redirect组件。\n5. Link：用于创建导航链接，点击后会更新URL，触发路由的切换。\n6. NavLink：与Link类似，但在匹配当前URL时会添加指定的样式。\n\n其他常用API：\n1. Redirect：用于重定向到指定的路由。\n2. withRouter：高阶组件，用于将路由器的相关信息（如history、location）传递给被包裹的组件。\n3. useHistory：自定义hook，用于在函数式组件中获取history对象。\n4. useLocation：自定义hook，用于在函数式组件中获取location对象。\n5. useParams：自定义hook，用于在函数式组件中获取路由参数。\n6. useRouteMatch：自定义hook，用于在函数式组件中获取与当前URL匹配的路由信息。\n\n以上是React Router的主要包和API。根据具体的需求，你可以使用这些API来构建和处理路由相关的逻辑。\n",{"_58":838,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/586/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/586/timeline",{"_58":841,"_60":61,"_62":842,"_64":843,"_66":844,"_68":845,"_70":846,"_72":847,"_74":848,"_76":849,"_78":850,"_111":851,"_131":132,"_133":24,"_134":-5,"_135":854,"_137":855,"_159":152,"_153":857,"_155":858,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":859,"_169":860,"_175":861,"_177":862,"_189":864,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/585","https://api.github.com/repos/pro-collection/interview-question/issues/585/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/585/comments","https://api.github.com/repos/pro-collection/interview-question/issues/585/events","https://github.com/pro-collection/interview-question/issues/585",1920802418,"I_kwDOJGDC6c5yfR5y",585,"[React] 是如何进行渲染的？【热度: 623】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[852,853],{"_70":594,"_72":595,"_58":596,"_117":597,"_119":598,"_121":24,"_122":599},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":856,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-01T14:41:56Z","2023-10-01T14:41:57Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：jsx渲染、react渲染过程\n\n在 React 中，JSX 最终被转换为真实的 DOM 经历了以下步骤：\n\n### 1. 解析 JSX：在编译阶段，React 会使用 Babel 等工具将 JSX 转换为 JavaScript 对象。\n\n在编译阶段，React 使用 Babel 等工具将 JSX 转换为 JavaScript 对象的过程可以使用以下代码示例来说明：\n\n原始的 JSX 代码：\n```jsx\nconst element =

Hello, world!

;\n```\n\n经过编译后，会被转换为类似的 JavaScript 对象：\n```javascript\nconst element = React.createElement(\"h1\", null, \"Hello, world!\");\n```\n\n上述代码中，`React.createElement` 是一个由 React 提供的方法，它接收三个参数：元素的类型、元素的属性（可以是一个对象或 null）、元素的子元素。这样，通过调用 `React.createElement`，JSX 元素就被转换成了一个 JavaScript 对象。\n\n在 React 项目中，Babel 是一个常用的工具，用于将 JSX 代码转换为 JavaScript 代码。Babel 实际上是一个 JavaScript 编译器，可以根据配置和插件，将代码从一种语法转换为另一种语法。\n\n当 Babel 遇到 JSX 代码时，它会使用一个名为 `@babel/preset-react` 的 preset（预设）来进行转换。这个 preset 包含了一系列的插件，用于处理 JSX 语法。\n\n**具体的工作流程如下**：\n\n1. Babel 解析代码：Babel 会将代码解析成抽象语法树（AST），以便于之后的处理。\n\n2. JSX 转换：Babel 使用 `@babel/preset-react` 预设来处理 JSX 代码。这个预设包含了一个插件 `@babel/plugin-transform-react-jsx`，用于将 JSX 转换为函数调用。\n\n 例如，将 `

Hello, world!

` 转换成 `React.createElement(\"h1\", null, \"Hello, world!\")`。\n\n3. 生成 JavaScript 代码：Babel 使用转换后的 AST，将其重新生成为 JavaScript 代码。\n\n 例如，将 `React.createElement(\"h1\", null, \"Hello, world!\")` 转换成实际的 JavaScript 代码。\n\n总结起来，Babel 的作用就是将 JSX 代码转换为 JavaScript 代码，使其能够在浏览器中执行。这样，React 就可以理解和处理 JSX 语法，并通过转换后的 JavaScript 代码来创建虚拟 DOM 和进行后续的更新操作。\n\n\n### 2. 创建虚拟 DOM：React 使用解析后的 JSX 对象来创建虚拟 DOM（Virtual DOM）。虚拟 DOM 是一个轻量级的、以 JavaScript 对象表示的 DOM 树的副本。\n\n**createElement 创建虚拟dom**\n\n在 React 中，`React.createElement` 函数用于创建虚拟 DOM 元素。它接受三个参数：元素类型、属性对象以及子元素。\n\n```javascript\nconst element = React.createElement(type, props, children);\n```\n\n`React.createElement` 函数会返回一个描述虚拟 DOM 元素的 JavaScript 对象。这个对象包含了元素的类型、属性和子元素等信息。例如，对于 `

Hello, React!

` 这个 JSX 语法，它被转换为以下形式：\n\n```javascript\nReact.createElement(\"div\", { className: \"container\" }, \"Hello, React!\");\n```\n\n这样就创建了一个描述 `

` 元素的虚拟 DOM 对象。虚拟 DOM 对象可以通过 `ReactDOM.render` 方法渲染到实际的 DOM 中。当虚拟 DOM 发生变化时，React 会通过比较新旧虚拟 DOM，找出差异并进行局部更新，从而最小化对实际 DOM 的操作。\n\n**createElement 原理**\n\n以下是 React 源码中 `React.createElement` 函数的简化版本：\n\n```javascript\nfunction createElement(type, props, ...children) {\n const element = {\n type,\n props: {\n ...props,\n children: children.map(child =>\n typeof child === 'object' ? child : createTextElement(child)\n )\n }\n };\n \n return element;\n}\n\nfunction createTextElement(text) {\n return {\n type: 'TEXT_ELEMENT',\n props: {\n nodeValue: text,\n children: []\n }\n };\n}\n```\n\n在上面的源码中，`createElement` 函数接收一个 `type` 参数（元素类型）、一个 `props` 参数（元素的属性对象）以及可选的 `children` 参数（子元素）。\n\n首先，通过创建一个名为 `element` 的对象，我们存储了虚拟 DOM 元素的信息。`element` 对象中的 `type` 属性保存了元素的类型，而 `props` 属性则是一个对象，用来存储元素的属性和子元素。我们使用了 ES6 中的扩展运算符将 `props` 参数中的属性分配给 `element.props`，同时也将 `children` 参数中的子元素映射为虚拟 DOM 对象。\n\n对于 `children` 参数的处理，通过 `children.map` 方法遍历 `children` 数组，并对每个子元素执行以下操作：\n\n- 如果子元素是对象类型，即已经是一个虚拟 DOM 对象，直接将其添加到 `element.props.children` 中。\n- 如果子元素是字符串或数字类型，即文本节点，那么我们调用 `createTextElement` 函数来创建一个描述该文本节点的虚拟 DOM 对象，并将其添加到 `element.props.children` 中。\n\n`createTextElement` 函数用于创建文本节点的虚拟 DOM 对象。它返回一个包含 `type` 为 `'TEXT_ELEMENT'` 的对象，且 `props` 对象中的 `nodeValue` 属性保存了文本节点的内容，`children` 属性为空数组。\n\n最后，我们将 `element` 对象作为结果返回，这样就创建了一个描述虚拟 DOM 元素的 JavaScript 对象。\n\n总结起来，`createElement` 函数通过创建一个对象来描述虚拟 DOM 元素，其中包含了元素的类型、属性和子元素等信息。对于子元素，会根据其类型进行判断，如果是对象类型，则直接添加到 `props.children` 中；如果是文本类型，则通过 `createTextElement` 函数创建对应的虚拟 DOM 对象。这样就生成了一个虚拟 DOM 元素，可以用于进行后续的渲染和更新操作。\n\n\n### 3. Diff 算法比较变化：在每次组件更新时，React 使用 Diff 算法对比前后两个虚拟 DOM 树的差异。Diff 算法能够高效地找出需要进行更新的部分。\n\nReact中通过diff算法来比较两个虚拟DOM树的差异，以确定需要更新的最小操作集合。\n\n首先，React会比较两个根节点的类型，如果不同，它们代表不同的组件，React会将原来的组件树完全替换为新的组件树。\n\n如果类型相同，React会比较两个根节点的属性，检查它们是否有任何更改。如果有更改，React会更新已有的DOM元素的属性。\n\n接下来，React会递归地比较和更新子节点。React会通过遍历子节点的方式找到相同位置上的子节点，并进行递归比较。\n\n对于子节点，React使用一种称为\"key\"的特殊属性来判断它们是否是相同的元素。如果两个子节点的key相同，React会认为它们是相同的元素，并只更新它们的属性和子节点。如果key不同，React会将旧的子节点完全替换为新的子节点。\n\n最后，React会将所有需要更新的操作记录下来，并将其发送到浏览器的渲染引擎中执行。这些操作可能包括添加、移动或删除DOM节点。\n\n通过使用diff算法，React可以最小化对真实DOM的操作，提高性能和效率。同时，React还会使用一些启发式策略和优化算法，如批处理和异步更新，来进一步提升性能。\n\n\n### 4. 生成 DOM 更新操作：根据 Diff 算法的比较结果，React 会生成一系列的 DOM 更新操作，包括添加、移除和修改节点等。这些操作被存储在更新队列中。\n\n在React中，生成DOM更新操作的过程可以概括为以下几个步骤：\n\n- 通过diff算法比较新旧虚拟DOM树的差异，得到需要更新的最小操作集合。\n\n- 对于每个需要更新的操作，React会将其转化为一个待执行的DOM更新任务。\n\n- React将这些待执行的DOM更新任务放入一个队列中，等待执行。\n\n- 当React准备执行DOM更新时，会将队列中的任务按照特定的顺序进行执行。这个顺序通常是根据DOM节点的层级和位置来确定的，以保证DOM更新的正确性。\n\n- 执行DOM更新时，React会根据操作的类型，比如添加、移动或删除DOM节点，调用浏览器提供的DOM API来执行相应的操作。\n\n- 在执行DOM更新的过程中，React会尽量优化操作，避免一些不必要的DOM操作。例如，将多个连续的DOM插入操作合并为一次操作，或者将多个DOM删除操作合并为一次操作。\n\n- 执行完所有的DOM更新任务后，React会通知浏览器进行重新渲染，将更新后的DOM树呈现给用户。\n\n总的来说，React通过将虚拟DOM树转化为真实DOM树，并通过diff算法生成DOM更新操作，然后按照特定顺序执行这些操作，最终完成DOM的更新和渲染。这样的设计可以提高性能，减少不必要的DOM操作，并保证DOM的一致性。\n\n\n### 5. 批量进行 DOM 更新：React 会将更新队列中的 DOM 更新操作批量进行，以减少浏览器的重绘和回流操作。React 会通过批量更新来优化性能。\n\nReact通过批量更新的方式来优化DOM操作，以减少不必要的性能开销。\n\n在React中，当需要更新组件状态或属性时，不会立即执行DOM更新操作，而是将更新请求加入到一个待处理的队列中。React会在适当的时机，比如在事件处理函数执行完毕或在生命周期方法结束时，对队列中的更新请求进行批量处理。\n\n具体的批量更新过程如下：\n\n- 在React中，每个组件都有一个内部的pending state队列，用于存储待处理的更新请求。\n\n- 当需要更新组件的状态或属性时，React会将更新请求添加到该组件的pending state队列中。\n\n- 在React的更新过程中，会遍历组件的pending state队列，将其中的所有更新请求合并为一个批量更新。\n\n- React会根据合并后的批量更新，生成最小化的DOM操作集合。\n\n- 最后，React会通过执行这个批量更新的DOM操作集合，将更新应用到真实的DOM树中。\n\n通过批量更新的方式，React可以减少不必要的DOM操作次数，提高性能。同时，React也提供了一些API，让开发者可以手动控制更新的时机，比如使用`setState`的回调函数、使用`ReactDom.unstable_batchedUpdates`方法等。\n\n需要注意的是，React并不保证所有的更新都会批量处理。在一些特殊情况下，比如在事件处理函数中手动调用`setState`，或者使用`ReactDOM.unstable_batchedUpdates`方法，可以强制进行批量更新。但在某些情况下，React可能会选择立即更新，以保证更新的时机和结果的一致性。\n\n### 6. 应用 DOM 更新：最后，React 将批量的 DOM 更新操作应用到实际的浏览器 DOM 中，从而更新用户界面。这个过程中，React 会尽量最小化对真实 DOM 的操作，以提高性能。\n\n原理同上，只是进行了重复操作；\n\n\n### 总结\n\n一图带千言\n\n![image](https://github.com/pro-collection/interview-question/assets/22188674/f24dad99-66fe-4206-9d05-6f7194dcc5b5)\n\n",{"_58":863,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/585/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/585/timeline",{"_58":866,"_60":61,"_62":867,"_64":868,"_66":869,"_68":870,"_70":871,"_72":872,"_74":873,"_76":874,"_78":875,"_111":876,"_131":132,"_133":24,"_134":-5,"_135":879,"_137":880,"_159":152,"_153":882,"_155":883,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":884,"_169":885,"_175":886,"_177":887,"_189":889,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/575","https://api.github.com/repos/pro-collection/interview-question/issues/575/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/575/comments","https://api.github.com/repos/pro-collection/interview-question/issues/575/events","https://github.com/pro-collection/interview-question/issues/575",1920655823,"I_kwDOJGDC6c5yeuHP",575,"XHR 和 Fetch 是否支持取消请求【热度: 122】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[877,878],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":881,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-01T09:07:06Z","2023-10-01T09:24:37Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：XHR 取消请求、Fetch 取消请求\r\n\r\n**XHR 支持取消请求**\r\n\r\nXHR（XMLHttpRequest）对象支持取消请求。你可以使用 `xhr.abort()` 方法来取消正在进行的请求。\r\n\r\n下面是一个使用 XHR 取消请求的示例代码：\r\n\r\n```javascript\r\nconst xhr = new XMLHttpRequest();\r\nxhr.open('GET', 'https://api.example.com/data', true);\r\nxhr.send();\r\n\r\n// 取消请求\r\nxhr.abort();\r\n```\r\n\r\n使用 `xhr.abort()` 方法会导致 XHR 请求被中止，并触发 `abort` 事件。\r\n\r\n需要注意的是，取消请求后，XHR 对象将不再可用，不能再使用已经取消的 XHR 对象发送新的请求。\r\n\r\n\r\n**Fetch API 原生不提供直接的方法来取消请求。然而，你可以使用 AbortController 来实现取消 fetch 请求的功能。**\r\n\r\nAbortController 是一个用于控制和取消异步操作的 API，它可以与 fetch 一起使用来取消网络请求。下面是一个使用 AbortController 来取消 fetch 请求的示例代码：\r\n\r\n```javascript\r\nconst controller = new AbortController();\r\nconst signal = controller.signal;\r\n\r\nfetch('https://api.example.com/data', { signal })\r\n .then(response => {\r\n // 处理响应\r\n })\r\n .catch(error => {\r\n if (error.name === 'AbortError') {\r\n console.log('请求被取消');\r\n } else {\r\n console.log('发生错误', error);\r\n }\r\n });\r\n\r\n// 取消请求\r\ncontroller.abort();\r\n```\r\n\r\n在上面的代码中，我们创建了一个 AbortController 对象，并从中获取一个 signal 信号。然后，将 signal 信号传递给 fetch 请求的 options 参数中。当调用 `controller.abort()` 方法时，fetch 请求会被取消，并且会触发一个 `AbortError` 错误。\r\n\r\n需要注意的是，AbortController 是一个较新的 API，不是所有浏览器都完全支持。为了确保在不支持 AbortController 的情况下仍能取消 fetch 请求，你可以使用 polyfill 或使用第三方库（如 Axios）来实现取消功能。\r\n",{"_58":888,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/575/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/575/timeline",{"_58":891,"_60":61,"_62":892,"_64":893,"_66":894,"_68":895,"_70":896,"_72":897,"_74":898,"_76":899,"_78":900,"_111":901,"_131":132,"_133":24,"_134":-5,"_135":904,"_137":905,"_159":152,"_153":907,"_155":908,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":909,"_169":910,"_175":911,"_177":912,"_189":914,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/574","https://api.github.com/repos/pro-collection/interview-question/issues/574/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/574/comments","https://api.github.com/repos/pro-collection/interview-question/issues/574/events","https://github.com/pro-collection/interview-question/issues/574",1920649319,"I_kwDOJGDC6c5yeshn",574,"axios 是如何区分是 nodejs 环境还是浏览器环境的？【热度: 113】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[902,903],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":487,"_68":488,"_62":489,"_70":490,"_72":491,"_74":492,"_76":493,"_122":494,"_147":906,"_149":496,"_151":152,"_131":132,"_153":497,"_155":498,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-01T08:51:30Z","2023-10-01T08:51:45Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：nodejs与浏览器环境判定\n\nAxios 是一个跨平台的 HTTP 客户端库，可以在浏览器和 Node.js 中使用。Axios 通过判断当前环境来确定是在浏览器还是在 Node.js 环境中运行。\n\n在浏览器环境中，Axios 默认会使用浏览器提供的 XMLHttpRequest 对象来发送 HTTP 请求。\n\n在 Node.js 环境中，**Axios 会检查是否存在 `process` 全局对象，以及 `process` 对象中是否存在 `nextTick` 方法**。如果存在以上两个条件，Axios 就默认在 Node.js 环境中运行，并使用 Node.js 内置的 `http` 模块发送 HTTP 请求。\n\n如果需要明确指定运行环境，可以使用 `axios.defaults.adapter` 属性来设置适配器（adapter），以便在需要时手动选择使用 XMLHttpRequest 或 Node.js 内置的 `http` 模块。\n\n例如，在 Node.js 环境中可以这样设置适配器：\n\n```javascript\nconst axios = require('axios');\nconst httpAdapter = require('axios/lib/adapters/http');\n\naxios.defaults.adapter = httpAdapter;\n```\n\n通过上述方式，Axios 可以根据环境自动选择适当的底层实现来发送 HTTP 请求，使其在不同的环境中都能正常工作。\n",{"_58":913,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/574/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/574/timeline",{"_58":916,"_60":61,"_62":917,"_64":918,"_66":919,"_68":920,"_70":921,"_72":922,"_74":923,"_76":924,"_78":925,"_111":926,"_131":132,"_133":24,"_134":-5,"_135":929,"_137":930,"_159":152,"_153":932,"_155":933,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":934,"_169":935,"_175":936,"_177":937,"_189":939,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/573","https://api.github.com/repos/pro-collection/interview-question/issues/573/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/573/comments","https://api.github.com/repos/pro-collection/interview-question/issues/573/events","https://github.com/pro-collection/interview-question/issues/573",1920648008,"I_kwDOJGDC6c5yesNI",573,"axios 有哪些特性？【热度: 464】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[927,928],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":487,"_68":488,"_62":489,"_70":490,"_72":491,"_74":492,"_76":493,"_122":494,"_147":931,"_149":496,"_151":152,"_131":132,"_153":497,"_155":498,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-01T08:48:07Z","2023-10-01T09:01:10Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：axios特性\r\n\r\n直接可以参考官网链接： https://axios-http.com/docs/intro\r\n\r\n特点\r\n- 从浏览器创建XMLHttpRequest\r\n- 从node.js生成http请求\r\n- 支持 Promise API\r\n- 拦截请求和响应\r\n- 转换请求和响应数据\r\n- 取消请求\r\n- 超时时间\r\n- 支持嵌套项的查询参数序列化\r\n- 自动请求体序列化为:\r\n - JSON (应用程序/ison)\r\n - 多部分/表格数据 (多部分/表格数据)\r\n - URL编码形式 (申请书/x-www-form-urlencoded )\r\n- 以JSON格式发布HTML表单\r\n- 响应中的自动JSON数据处理\r\n- 为浏览器和node.js捕获进度，附带额外信息 (速度、剩余时间)\r\n- 设置node.is的带宽限制\r\n- 兼容符合规范的FormData和Blob (包括节点) js)\r\n- 客户端对XSRF的保护支持\r\n",{"_58":938,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/573/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/573/timeline",{"_58":941,"_60":61,"_62":942,"_64":943,"_66":944,"_68":945,"_70":946,"_72":947,"_74":948,"_76":949,"_78":950,"_111":951,"_131":132,"_133":24,"_134":-5,"_135":960,"_137":961,"_159":152,"_153":973,"_155":974,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":975,"_169":976,"_175":977,"_177":978,"_189":980,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/562","https://api.github.com/repos/pro-collection/interview-question/issues/562/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/562/comments","https://api.github.com/repos/pro-collection/interview-question/issues/562/events","https://github.com/pro-collection/interview-question/issues/562",1910274282,"I_kwDOJGDC6c5x3Hjq",562,"JavaScript 和 BOM、DOM 、ECMAScript、Nodejs 之间是什么关系",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[952,959],{"_70":953,"_72":954,"_58":955,"_117":956,"_119":957,"_121":24,"_122":958},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":962,"_68":963,"_62":964,"_70":965,"_72":966,"_74":194,"_76":967,"_122":968,"_147":969,"_149":970,"_151":152,"_131":132,"_153":971,"_155":972,"_157":-5,"_158":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/1","https://github.com/pro-collection/interview-question/milestone/1","https://api.github.com/repos/pro-collection/interview-question/milestones/1/labels",9124541,"MI_kwDOJGDC6c4Aizq9","初","初级面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2023-09-24T15:31:05Z","2023-09-24T15:53:12Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**ECMAScript**\r\n\r\n`ECMAScript`是`JavaScript`的标准化规范，它定义了`JavaScript`的语法、数据类型、函数、控制流等。`ECMAScript`最早在1997年发布，由欧洲计算机制造商协会（ECMA）负责制定和维护。\r\n\r\n`ECMAScript`的目的是为了确保不同厂商的`JavaScript`实现在语法和行为方面保持一致性，以便开发者能够轻松地编写跨平台、跨浏览器的`JavaScript`代码。标准化的`ECMAScript`规范使得开发者可以在不同的`JavaScript`环境中编写相同的代码，而不必担心语法差异和行为不一致性。\r\n\r\n`ECMAScript`规范每年进行一次更新，新版本通常包含了新的语法特性、API和改进。在每个`ECMAScript`版本发布之前，由各个浏览器厂商先行实现并测试新特性，然后将其添加到浏览器中。这就是为什么不同浏览器可能对同一版本的`ECMAScript`支持程度不同的原因。\r\n\r\n常见的`ECMAScript`版本包括ES5（2009年发布）、ES6（2015年发布，也被称为ES2015）、ES7（2016年发布，也被称为ES2016）等。每个版本都引入了新的语法和功能，使得`JavaScript`变得更加强大和灵活。开发者可以根据目标浏览器的支持情况选择使用不同版本的`ECMAScript`特性。\r\n\r\n\r\n**JavaScript**是一种高级编程语言，用于为网页添加交互和动态功能。它实现了ECMAScript标准，该标准定义了`JavaScript`的语法、数据类型、函数、控制流等。`JavaScript`是一种解释性脚本语言，代码在运行时由浏览器解析和执行。\r\n\r\n**BOM**（Browser Object Model）是浏览器对象模型，它提供了与浏览器交互的API。`BOM`并不是ECMAScript的一部分，而是浏览器厂商自行实现的一组对象和方法。通过`BOM`，开发者可以操作浏览器窗口、解析URL、发送HTTP请求、控制浏览器历史记录等。其中最常见的`BOM`对象是window对象，它代表了浏览器的窗口或框架。\r\n\r\n**DOM**（Document Object Model）是文档对象模型，它定义了用于访问和操作HTML、XML等文档的API。`DOM`提供了一组对象和方法，用于表示文档的结构和内容。通过`DOM`，开发者可以通过`JavaScript`动态地创建、修改和删除HTML元素，修改样式和属性，处理事件等。`DOM`也不是ECMAScript的一部分，而是由浏览器厂商实现的标准。\r\n\r\n**Node.js**是一个基于V8引擎的`JavaScript`运行时环境，使`JavaScript`可以在服务器端运行。与浏览器中的`JavaScript`不同，`Node.js`提供了一组基于事件驱动的API，用于构建高性能和可伸缩的网络应用程序。`Node.js`可以执行文件操作、网络通信、数据库访问等服务器端任务，并且可以通过包管理器npm安装和管理第三方模块。\r\n\r\n总结来说，`JavaScript`是一种编程语言，实现了ECMAScript标准。`BOM`和`DOM`是浏览器提供的API，用于与浏览器交互并操作文档。`Node.js`是一个独立的运行时环境，使`JavaScript`可以在服务器端运行，并提供了一组用于构建网络应用程序的API。\r\n",{"_58":979,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/562/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/562/timeline",{"_58":982,"_60":61,"_62":983,"_64":984,"_66":985,"_68":986,"_70":987,"_72":988,"_74":989,"_76":990,"_78":991,"_111":992,"_131":132,"_133":24,"_134":-5,"_135":995,"_137":996,"_159":152,"_153":998,"_155":999,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":1000,"_169":1001,"_175":1002,"_177":1003,"_189":1005,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/561","https://api.github.com/repos/pro-collection/interview-question/issues/561/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/561/comments","https://api.github.com/repos/pro-collection/interview-question/issues/561/events","https://github.com/pro-collection/interview-question/issues/561",1899359745,"I_kwDOJGDC6c5xNe4B",561,"weakSet 是什么数据结构，有什么应用场景【热度: 161】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[993,994],{"_70":953,"_72":954,"_58":955,"_117":956,"_119":957,"_121":24,"_122":958},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":487,"_68":488,"_62":489,"_70":490,"_72":491,"_74":492,"_76":493,"_122":494,"_147":997,"_149":496,"_151":152,"_131":132,"_153":497,"_155":498,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-09-16T08:46:05Z","2023-09-16T08:46:18Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：weakSet 数据、weakSet 结构、weakSet 作用\n\nWeakSet 是一种特殊的集合数据结构，它只能存储对象引用，并且这些对象是弱引用。WeakSet 中的对象是被弱引用的，意味着如果没有其他引用指向这个对象，垃圾回收机制就会自动将其回收，即使该对象存在于 WeakSet 中。与 Set 不同，WeakSet 不支持迭代和遍历。\n\n**API**\n\nWeakSet 提供了以下几个常用的 API：\n\n1. `add(value)`：向 WeakSet 中添加一个值。\n\n2. `delete(value)`：从 WeakSet 中删除指定的值。\n\n3. `has(value)`：判断 WeakSet 中是否存在指定的值，返回一个布尔值。\n\n需要注意的是，WeakSet 不支持迭代和遍历操作，所以没有类似于 Set 的 `keys()`、`values()`、`entries()` 或 `forEach()` 等方法。同时，WeakSet 也没有类似于 Set 的 `size` 属性来获取 WeakSet 中的元素个数。\n\n另外，WeakSet 是一个构造函数，可以使用 `new WeakSet()` 来创建一个空的 WeakSet。\n\n\n**使用场景**\n\nWeakSet 的主要应用场景是在需要存储对象集合，并且不希望这些对象的存在阻止它们被垃圾回收时使用。一些常见的使用场景包括：\n\n1. 对象存储：WeakSet 可以用来存储一组对象，并且不会阻止这些对象被垃圾回收。这在需要跟踪一组对象，但又不希望这些对象阻止被释放时很有用。\n\n2. 数据缓存：由于 WeakSet 中的对象是弱引用的，当对象从其他地方被删除时，它们会自动从 WeakSet 中移除。这在需要缓存一些对象，但又希望能够自动清理不再需要的对象时很有用。\n\n需要注意的是，由于 WeakSet 中的对象是弱引用的，所以不能通过遍历或迭代来访问 WeakSet 中的对象。同时，WeakSet 也不提供像 Set 那样的方法，无法判断对象是否存在于 WeakSet 中。\n",{"_58":1004,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/561/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/561/timeline",{"_58":1007,"_60":61,"_62":1008,"_64":1009,"_66":1010,"_68":1011,"_70":1012,"_72":1013,"_74":1014,"_76":1015,"_78":1016,"_111":1017,"_131":132,"_133":24,"_134":-5,"_135":1020,"_137":1021,"_159":152,"_153":1023,"_155":1024,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":1025,"_169":1026,"_175":1027,"_177":1028,"_189":1030,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/547","https://api.github.com/repos/pro-collection/interview-question/issues/547/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/547/comments","https://api.github.com/repos/pro-collection/interview-question/issues/547/events","https://github.com/pro-collection/interview-question/issues/547",1878563896,"I_kwDOJGDC6c5v-Jw4",547,"前端架构和前端工程化有什么区别？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[1018,1019],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":217,"_68":218,"_62":219,"_70":220,"_72":221,"_74":222,"_76":223,"_122":224,"_147":1022,"_149":226,"_151":152,"_131":132,"_153":227,"_155":228,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-09-02T10:05:40Z","2023-09-02T10:05:41Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"先说说对这两个概念的看法：\n- [如何理解前端架构？](https://github.com/pro-collection/interview-question/issues/545)\n- [如何理解前端工程化？](https://github.com/pro-collection/interview-question/issues/546)\n\n**区别**\n\n前端架构和前端工程化是两个不同的概念，但它们之间有一些相互关联的特点。\n\n前端架构是指在前端开发中，对整个前端应用程序的组织结构、模块划分、框架选择等方面的设计和规划。前端架构的目标是为了提高代码的可维护性、可扩展性和可重用性，以及优化前端应用程序的性能和用户体验。常见的前端架构包括MVC（Model-View-Controller）、MVVM（Model-View-ViewModel）等。\n\n前端工程化是指使用各种工具、技术和流程对前端开发过程进行管理和优化，以提高开发效率、代码质量和团队协作能力。前端工程化的目标是通过规范化和自动化的方式，解决前端开发中的重复劳动、低效率、代码质量不稳定等问题。前端工程化包括代码管理、代码规范、模块化开发、构建工具、自动化测试、持续集成和部署、性能优化、文档和知识管理等方面。\n\n虽然前端架构和前端工程化是两个不同的概念，但它们之间存在一些相似的目标和方法。前端架构关注的是前端应用程序的结构和设计，而前端工程化关注的是前端开发的流程和工具的使用。前端架构可以通过前端工程化的方式实现，而前端工程化可以提供支持和保障，以实现良好的前端架构。\n",{"_58":1029,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/547/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/547/timeline","pagination",{"_1033":144,"_166":222},"value","actionData","errors"]