Hello, World!

;\n};\n```\n\nBabel 会将这段 JSX 编译为如下的 JavaScript 代码：\n\n```javascript\nconst MyComponent = () => {\n return React.createElement(\"div\", null, \"Hello, World!\");\n};\n```\n\n由于编译后的代码调用了`React.createElement`，因此你需要在文件顶部导入`React`对象才能使用它。即使你在组件中并没有直接使用`React`对象，编译后的代码依赖于`React`的运行时。\n\n### Babel 7.0+ / React 17+ ，可以不再需要 import React\n\n在 Babel 7.0 版本之后，`@babel/plugin-transform-react-jsx` 插件还支持一个自动模式，它可以自动引入 JSX 转换所需的`React`包，无需手动在每个文件中添加 `import React from 'react'`。\n\n注意，随着 React 17 的新 JSX 变换，它们引入了一个新的 JSX 转换方式，这在新的 Babel 插件 `@babel/plugin-transform-react-jsx` 和 `@babel/preset-react` 中得到了支持。这意味着在写 JSX 时，你不再需要导入 React。这个插件现在接收一个 `{ runtime: 'automatic' }` 选项来启用这一特性。\n\n举个例子，在使用新的 JSX 转换之后，编译器将会自动引入 JSX 的运行时库，而不是 React，例如对于一个使用了新转换的`MyComponent`的组件:\n\n```jsx\n// React 17+ 及支持新JSX转换的环境，可以不需要显式写这行\n// import React from 'react';\n\nconst MyComponent = () => {\n return

Hello, World!

;\n};\n```\n\n在新的转换下，你会看到类似`import { jsx as _jsx } from 'react/jsx-runtime'`的东西或者类似的别名，被自动插入到转译后的文件中，而不再是直接的`React.createElement`调用。这就是为什么在新版本的 React 中，你可能不再需要手动导入 React 了。\n\n### 补充一个细节知识点： plugin-transform-react-jsx`和`@babel/preset-react` 是啥关系\n\n**它们是包含关系**： `@babel/preset-react` 包括了 `@babel/plugin-transform-react-jsx`\n\n`@babel/plugin-transform-react-jsx` 和 `@babel/preset-react` 都是 Babel 插件，它们在处理 React 项目中的 JSX 代码方面有关联，但它们的用途和包含的内容有所不同。\n\n1. **@babel/plugin-transform-react-jsx**:\n 这是一个特定的 Babel 插件，它的功能就是将 JSX 语法转换为`React.createElement` 调用。随着 React 17 的更新，它还允许使用新的 JSX 转换，无需导入 React 就可以使用 JSX。这意味着，在文件中不再需要 `import React from 'react'` 语句了，就可以使用 JSX。\n\n 这个插件通常用于开发者想要精细控制某个具体转换功能时。如果你只需要转换 JSX 语法，但不需要处理其他与 React 相关的转换或优化，你可能会单独使用这个插件。\n\n2. **@babel/preset-react**:\n 这是一个 Babel 预设，它是一组 Babel 插件的集合，旨在为 React 项目提供所需的全部 Babel 插件。`@babel/preset-react` 包括了 `@babel/plugin-transform-react-jsx`，但它还包含了其他一些插件，如处理 React 的显示名称的 `@babel/plugin-transform-react-display-name`，以及为开发模式和生产模式添加/删除某些代码的插件。\n\n 预设的好处是简化了配置过程。开发者可以在 Babel 的配置中一次性添加 `@babel/preset-react`，而不是单独添加每一个与 React 相关的 Babel 插件。此外，预设将维护这些插件的正确版本和顺序，这有助于避免潜在的配置错误。\n\n在实践中，大多数开发 React 应用的开发者会使用 `@babel/preset-react` 因为它提供了一个即插即用的 Babel 环境，无需担心各个插件的具体细节。但是也有些情况下，为了更细致的优化和控制，开发者可能会选择手动添加特定的插件，包括 `@babel/plugin-transform-react-jsx`。\n",{"_58":891,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/701/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/701/timeline",{"_58":894,"_60":61,"_62":895,"_64":896,"_66":897,"_68":898,"_70":899,"_72":900,"_74":901,"_76":902,"_78":903,"_111":904,"_131":132,"_133":24,"_134":-5,"_135":907,"_137":908,"_159":152,"_153":910,"_155":910,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":911,"_170":912,"_176":913,"_178":914,"_190":916,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/700","https://api.github.com/repos/pro-collection/interview-question/issues/700/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/700/comments","https://api.github.com/repos/pro-collection/interview-question/issues/700/events","https://github.com/pro-collection/interview-question/issues/700",2241866681,"I_kwDOJGDC6c6FoCu5",700,"babel 核心库有哪些？【热度: 35】",{"_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},[905,906],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":878,"_72":879,"_58":880,"_117":881,"_119":129,"_121":24,"_122":-5},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":909,"_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},"2024-04-14T02:22:11Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：babel 核心库\n\nBabel 是一个 JavaScript 编译器，主要用于将 ES6 及以上版本的代码转换为向后兼容的 JavaScript 语法，以便在当前和旧版浏览器或环境中执行。核心的 Babel 库主要包括：\n\n1. **@babel/core**:\n 这是 Babel 编译器的核心包，提供了 Babel 的主要转换引擎。它包含了解析、转换和生成代码的主要功能。几乎所有的 Babel 操作都需要这个模块作为基础。\n\n2. **@babel/cli**:\n 这是 Babel 的命令行接口，通过它可以在终端或命令提示符中运行 Babel。它允许你执行转编译操作，如将 ES6 代码转换为 ES5。\n\n3. **@babel/preset-env**:\n 这是一个智能预设，允许你使用最新的 JavaScript，而不必管理语法转换。`@babel/preset-env`会根据你的目标环境（比如特定版本的浏览器或 Node.js），自动决定使用哪些 Babel 插件和 polyfills。\n\n4. **@babel/polyfill** (现在已经被废弃，推荐使用 `core-js` 和 `regenerator-runtime`):\n 早期 Babel 版本中用于模拟完整的 ES2015+环境的包。它的目的是在全局范围内添加填充以模拟较新的环境。从 Babel 7.4.0 开始，建议直接包括 `core-js` 和 `regenerator-runtime`，因为这提供了更好的模块化和按需加载功能。\n\n5. **babel-loader**:\n 这是 Babel 的一个 webpack 插件，可以将 Babel 集成到 webpack 构建过程中，使得你可以使用 webpack 来处理和打包使用了新版 JavaScript 语法的文件。\n\n6. **@babel/plugin-transform-runtime**:\n 这个插件用于复用 Babel 注入的辅助代码，以节省代码大小，并能够在不污染全局环境的情况下使用新语言特性的 polyfills。\n\n除了这些核心库外，还有许多可用的 Babel 插件，以支持各种 JavaScript 语法和特性（比如装饰器、类属性等）。这些插件可以按需引入，配置在 Babel 的配置文件（通常是`.babelrc`或`babel.config.js`）中。这些插件的命名通常遵循 `@babel/plugin-` 的格式。\n",{"_58":915,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/700/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/700/timeline",{"_58":918,"_60":61,"_62":919,"_64":920,"_66":921,"_68":922,"_70":923,"_72":924,"_74":925,"_76":926,"_78":927,"_111":928,"_131":132,"_133":24,"_134":-5,"_135":931,"_137":932,"_159":152,"_153":934,"_155":934,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":935,"_170":936,"_176":937,"_178":938,"_190":940,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/692","https://api.github.com/repos/pro-collection/interview-question/issues/692/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/692/comments","https://api.github.com/repos/pro-collection/interview-question/issues/692/events","https://github.com/pro-collection/interview-question/issues/692",2241563808,"I_kwDOJGDC6c6Fm4yg",692,"在Babel里，stage0、stage1、stage2 和 stage3 分别代表什么含义？",{"_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},[929,930],{"_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":933,"_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},"2024-04-13T13:31:02Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"> 无意中看到别人一个面试问题，个人感觉问这个问题的面试官，不是蠢就是坏。 \n> 没有任何面试价值，无法考察候选人水平。 \n> 仅仅作为科普类型参考 - 热度为 0\n\nBabel 是一个流行的 JavaScript 编译器，它允许开发者使用新的语言特性，然后将它们编译成可以在当前和低版本的浏览器或环境中运行的代码。\n\n在 Babel 里，stage0、stage1、stage2 和 stage3 这些术语指的是 ECMAScript 提案的不同阶段。ECMAScript 是 JavaScript 语言的标准化规范，新的特性进入标准之前会通过几个阶段的提案。\n\n这些阶段表示了一个特性在正式成为 ECMAScript 标准的一部分之前的成熟度。这个过程有一个官方的 5 个阶段流程，即从 Stage 0（strawman）到 Stage 4（finished）。下面是这些阶段的含义：\n\n- **Stage 0 - Strawman（稻草人阶段）:** 初始阶段，任何尚未被 TC39（ECMAScript 的标准化组织）官方审议的提案都属于这里。这些都是某个委员或者社区成员提交的想法，还不算是正式的提案。\n\n- **Stage 1 - Proposal（提案阶段）:** 这个阶段的特性是值得进一步探讨的。它们需要有一个形式化的提案和一个负责人。在这个阶段，主要是确定问题和解决方案，以及进行初步探讨。\n\n- **Stage 2 - Draft（草案阶段）:** 一旦一个提案到达这个阶段，它就被认为是初步规格的草案。特性的描述应该足够具体和详细，并且有初步的实现。这个阶段通常需要提案的规格文本和至少一种实验性实现。\n\n- **Stage 3 - Candidate（候选阶段）:** 在候选阶段，提案的规格已经基本完成，并且需要更多的用户反馈来发现潜在问题。通常在这个阶段，实现者和开发者开始在生产环境中尝试使用这些特性，发现问题并提出改善建议。\n\n- **Stage 4 - Finished（完成阶段）:** 当一个提案达到这个阶段，它已经准备好被集成到下一个版本的 ECMAScript 标准中了。这意味着它已经获得了多个独立环境的实现，通过了综合的可行性和稳定性测试，并且已经被 TC39 委员会接受。\n\n开发者们可以根据特性的稳定性和自己的需求，选择使用 Babel 的哪个阶段的预设。然而，请注意，使用较低阶段的提案特性在生产环境中是有风险的，因为它们还没有被完全确定并可能会在将来发生变更。\n",{"_58":939,"_181":195,"_182":195,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/692/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/692/timeline",{"_58":942,"_60":61,"_62":943,"_64":944,"_66":945,"_68":946,"_70":947,"_72":948,"_74":949,"_76":950,"_78":951,"_111":952,"_131":132,"_133":24,"_134":-5,"_135":955,"_137":956,"_159":152,"_153":958,"_155":958,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":959,"_170":960,"_176":961,"_178":962,"_190":964,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/691","https://api.github.com/repos/pro-collection/interview-question/issues/691/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/691/comments","https://api.github.com/repos/pro-collection/interview-question/issues/691/events","https://github.com/pro-collection/interview-question/issues/691",2241562512,"I_kwDOJGDC6c6Fm4eQ",691,"Webpack 项目中通过 script 标签引入资源，在项目中如何处理?【热度: 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},[953,954],{"_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":957,"_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},"2024-04-13T13:28:24Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"> 也是作者无意中看到的一个有意思的问题。 \n> 虽然有意思，但是没有任何价值，如果说在项目中遇到过的，而且处理过的同学，肯定知道怎么回答。 \n> 但是压根没有碰到过得，就算是你工作十年的老油条也是干望着。所有没有任何面试价值。 \n> 故此，可以当做科普来看看就行。\n\n在使用 Webpack 打包的项目中，通常资源（如 JavaScript、CSS、图片等）会被 Webpack 处理，因为 Webpack 的设计初衷就是将所有资源视为模块，并进行有效的管理和打包。但有时候可能需要通过`\n ```\n\n 这种方法简单直接，但要记住，由于这些资源不会被 Webpack 处理，它们不会被包含在 Webpack 的依赖图中，并且也不会享受到 Webpack 的各种优化。\n\n2. **使用 Webpack 管理：**\n 如果想要 Webpack 来处理这些通过`\n ```\n\n 使用`externals`的方法能让你在 Webpack 打包的模块代码中用正常的`import`或`require`语句来引用那个全局变量：\n\n ```javascript\n // 你的 JavaScript 代码文件中\n import Library from \"libraryName\"; // 虽然定义了external，Webpack依然会处理这个import\n ```\n\n应根据项目需求和现有的架构来决定使用哪种方法。上述两种方法中，第二种可以更好地利用 Webpack 的功能，第一种则更加简单直接。\n",{"_58":963,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/691/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/691/timeline",{"_58":966,"_60":61,"_62":967,"_64":968,"_66":969,"_68":970,"_70":971,"_72":972,"_74":973,"_76":974,"_78":975,"_111":976,"_131":132,"_133":24,"_134":-5,"_135":979,"_137":980,"_159":152,"_153":982,"_155":982,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":983,"_170":984,"_176":985,"_178":986,"_190":988,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/678","https://api.github.com/repos/pro-collection/interview-question/issues/678/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/678/comments","https://api.github.com/repos/pro-collection/interview-question/issues/678/events","https://github.com/pro-collection/interview-question/issues/678",2229673640,"I_kwDOJGDC6c6E5h6o",678,"为什么 Vite 速度比 Webpack 快？【热度: 382】",{"_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},[977,978],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":264,"_72":265,"_58":266,"_117":267,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":981,"_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},"2024-04-07T10:00:17Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：vite 编译速度、vite 速度与 webpack 速度\n\n#### 1、开发模式的差异\n\n在开发环境中，`Webpack` 是先打包再启动开发服务器，而 `Vite` 则是直接启动，然后再按需编译依赖文件。（大家可以启动项目后检查源码 `Sources` 那里看到）\n\n这意味着，当使用 `Webpack` 时，所有的模块都需要在开发前进行打包，这会增加启动时间和构建时间。\n\n而 `Vite` 则采用了不同的策略，它会在请求模块时再进行实时编译，这种按需动态编译的模式极大地缩短了编译时间，特别是在大型项目中，文件数量众多，`Vite` 的优势更为明显。\n\n**Webpack启动**\n\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31fa5a46d4e74c5db56928f1bb2087c4~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1029&h=552&s=47251&e=png&b=fcfcfc)\n\n**Vite启动**\n\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfa5c4618b75419d8b3a9139425972e5~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=892&h=838&s=50064&e=png&b=ffffff)\n\n#### 2、对ES Modules的支持\n\n现代浏览器本身就支持 `ES Modules`，会`主动发起`请求去获取所需文件。Vite充分利用了这一点，将开发环境下的模块文件直接作为浏览器要执行的文件，而不是像 Webpack 那样`先打包`，再交给浏览器执行。这种方式减少了中间环节，提高了效率。\n\n**什么是ES Modules？**\n\n通过使用 `export` 和 `import` 语句，ES Modules 允许在浏览器端导入和导出模块。\n\n当使用 ES Modules 进行开发时，开发者实际上是在构建一个`依赖关系图`，不同依赖项之间通过导入语句进行关联。\n\n主流浏览器（除IE外）均支持ES Modules，并且可以通过在 script 标签中设置 `type=\"module\"`来加载模块。默认情况下，模块会延迟加载，执行时机在文档解析之后，触发DOMContentLoaded事件前。\n\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b03dbc4400c745c8bca371a9ab63f52b~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=2059&h=823&s=194009&e=png&b=f0e6d2)\n\n#### 3、底层语言的差异\n\nWebpack 是基于 `Node.js` 构建的，而 Vite 则是基于 `esbuild` 进行预构建依赖。esbuild 是采用 `Go` 语言编写的，Go 语言是`纳秒`级别的，而 Node.js 是`毫秒`级别的。因此，Vite 在打包速度上相比Webpack 有 `10-100` 倍的提升。\n\n**什么是预构建依赖？**\n\n预构建依赖通常指的是在项目`启动或构建`之前，对项目中所需的依赖项进行预先的`处理或构建`。这样做的好处在于，当项目实际运行时，可以`直接使用`这些已经预构建好的依赖，而无需再进行实时的编译或构建，从而提高了应用程序的运行速度和效率。\n\n#### 4、热更新的处理\n\n在 Webpack 中，当一个模块或其依赖的模块内容改变时，需要`重新编译`这些模块。\n\n而在 Vite 中，当某个模块内容改变时，只需要让浏览器`重新请求`该模块即可，这大大减少了热更新的时间。\n\n#### 总结\n\n总的来说，Vite 之所以比 Webpack 快，主要是因为它采用了`不同的开发模式`、`充分利用了现代浏览器的 ES Modules 支持`、`使用了更高效的底层语言`，`并优化了热更新的处理`。这些特点使得 Vite在大型项目中具有显著的优势，能够快速启动和构建，提高开发效率。\n\n\n#### 参考文档：\nhttps://juejin.cn/post/7344916114204049445\n",{"_58":987,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/678/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/678/timeline",{"_58":990,"_60":61,"_62":991,"_64":992,"_66":993,"_68":994,"_70":995,"_72":996,"_74":997,"_76":998,"_78":999,"_111":1000,"_131":132,"_133":24,"_134":-5,"_135":1003,"_137":1004,"_159":152,"_153":1006,"_155":1007,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":1008,"_170":1009,"_176":1010,"_178":1011,"_190":1013,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/661","https://api.github.com/repos/pro-collection/interview-question/issues/661/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/661/comments","https://api.github.com/repos/pro-collection/interview-question/issues/661/events","https://github.com/pro-collection/interview-question/issues/661",2061644717,"I_kwDOJGDC6c564jOt",661,"web 系统里面，如何对图片进行优化？【热度: 789】",{"_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},[1001,1002],{"_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":1005,"_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},"2024-01-01T16:17:35Z","2024-01-01T16:17:36Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：图片优化\n\n图片作为网页和移动应用中不可或缺的元素之一，对于用户体验和网站性能都有着重要的影响。\n\n加载速度是用户体验的关键因素之一，而大尺寸的图片会增加网页加载时间，导致用户等待时间过长，从而影响用户的满意度和留存率。通过优化图片，我们可以显著减少页面加载时间，提供更快速流畅的使用体验。\n\n图片优化是提升用户体验、提高网站性能、减少流量消耗和增加搜索引擎曝光度的关键因素。为了提供更出色的用户体验，同时也提升网站的性能。总结了一下通用的图片优化首手段。\n\n### 1. 选择合适的图片格式\n\n以下是对常用的图片格式jpg、png和webp进行深度对比的表格：\n\n| 特性 | JPG | PNG | WebP |\n|---------|------------------|------------------|------------------|\n| 压缩算法 | 有损压缩 | 无损压缩 | 有损压缩 |\n| 透明度 | 不支持透明度 | 支持透明度 | 支持透明度 |\n| 图片质量 | 可调整质量 | 无法调整质量 | 可调整质量 |\n| 文件大小 | 相对较小 | 相对较大 | 相对较小 |\n| 浏览器支持 | 支持在所有主流浏览器上显示 | 支持在所有主流浏览器上显示 | 部分浏览器支持 |\n| 动画支持 | 不支持动画 | 不支持动画 | 支持动画 |\n| 兼容性 | 兼容性较好 | 兼容性较好 | 兼容性较差 |\n\n请注意，这个表格只是对这些格式的一般特征进行了总结，并不代表所有情况。实际情况可能因图像内容、压缩设置和浏览器支持等因素而有所不同。因此，在选择图像格式时，您应根据具体要求和应用场景进行评估和选择。\n\n### 2. 图片压缩\n主要介绍 webpack 对图片进行压缩，可以使用以下步骤：\n\n1. 安装依赖：首先，确保你已经在项目中安装了webpack和相关的loader。可以使用以下命令安装所需的loader：\n```\nnpm install --save-dev file-loader image-webpack-loader\n```\n\n2. 配置Webpack：在Webpack的配置文件中进行相关配置。以下是一个简单的示例：\n```javascript\nconst path = require('path');\n\nmodule.exports = {\n entry: 'src/index.js',\n output: {\n filename: 'bundle.js',\n path: path.resolve(__dirname, 'dist')\n },\n module: {\n rules: [\n {\n test: /\\.(png|jpe?g|gif)$/i,\n use: [\n {\n loader: 'file-loader',\n options: {\n name: '[name].[ext]',\n outputPath: 'images/'\n }\n },\n {\n loader: 'image-webpack-loader',\n options: {\n mozjpeg: {\n progressive: true,\n quality: 65\n },\n // optipng.enabled: false will disable optipng\n optipng: {\n enabled: false,\n },\n pngquant: {\n quality: [0.65, 0.90],\n speed: 4\n },\n gifsicle: {\n interlaced: false,\n },\n // the webp option will enable WEBP\n webp: {\n quality: 75\n }\n }\n }\n ]\n }\n ]\n }\n};\n```\n上述配置中，我们使用`file-loader`将图片复制到输出目录，并使用`image-webpack-loader`对图片进行压缩和优化。\n\n3. 运行Webpack：现在，当你运行Webpack时，它将自动使用`image-webpack-loader`对匹配到的图片进行压缩和优化。压缩后的图片将被复制到输出目录中。\n\n### 3. 雪碧图\n\nWeb图片优化的雪碧图（CSS Sprites）是一种将多个小图片合并为一个大图片的技术。通过将多个小图片合并成一张大图片，可以减少浏览器发送的请求次数，从而提高页面加载速度。\n\n雪碧图的原理是通过CSS的`background-image`和`background-position`属性，将所需的小图片显示在指定的位置上。这样，只需加载一张大图，就可以显示多个小图片，减少了网络请求的数量，提高了页面加载速度。\n\n听上去好像很麻烦， **实际上可以使用 webpack 插件 `webpack-spritesmith`** 完成自动化处理雪碧图合成，我们在使用过程中正常使用即可。\n\n以下是使用`webpack-spritesmith`插件来自动处理雪碧图的步骤：\n\n1. 安装插件：使用npm或yarn安装`webpack-spritesmith`插件。\n```bash\nnpm install webpack-spritesmith --save-dev\n```\n\n2. 配置Webpack：在Webpack配置文件中，引入`webpack-spritesmith`插件，并配置相应的选项。\n\n```javascript\nconst SpritesmithPlugin = require('webpack-spritesmith');\n\nmodule.exports = {\n // ...其他配置\n\n plugins: [\n new SpritesmithPlugin({\n src: {\n cwd: path.resolve(__dirname, 'path/to/sprites'), // 需要合并的小图片所在的目录\n glob: '*.png' // 小图片的文件名格式\n },\n target: {\n image: path.resolve(__dirname, 'path/to/output/sprite.png'), // 生成的雪碧图的路径和文件名\n css: path.resolve(__dirname, 'path/to/output/sprite.css') // 生成的CSS样式表的路径和文件名\n },\n apiOptions: {\n cssImageRef: 'path/to/output/sprite.png' // CSS样式表中引用雪碧图的路径\n }\n })\n ]\n}\n```\n\n3. 使用雪碧图：在HTML中，使用生成的CSS样式类来显示相应的小图片。Webpack会自动处理雪碧图的合并和CSS样式的生成。例如：\n\n然后，你可以按照以下方法在CSS中引用雪碧图：\n\nCSS方式：\n```css\ndiv {\n background: url(path/to/output/sprite.png) no-repeat;\n}\n\n.icon-facebook {\n /* 设置小图标在雪碧图中的位置和大小 */\n width: 32px;\n height: 32px;\n background-position: 0 0; /* 该小图标在雪碧图中的位置 */\n}\n\n.icon-twitter {\n width: 32px;\n height: 32px;\n background-position: -32px 0; /* 该小图标在雪碧图中的位置 */\n}\n\n.icon-instagram {\n width: 32px;\n height: 32px;\n background-position: -64px 0; /* 该小图标在雪碧图中的位置 */\n}\n```\n\n在HTML中，你可以像下面这样使用对应的CSS类来显示相应的小图标：\n\n```html\n

\n```\n\n这样，Webpack会根据配置自动处理雪碧图，并生成对应的雪碧图和CSS样式表。CSS中的`background`属性会引用生成的雪碧图，并通过`background-position`来指定显示的小图标在雪碧图中的位置。\n\n确保在CSS中指定了每个小图标在雪碧图中的位置和大小，以便正确显示。\n\n使用Webpack自动处理雪碧图可以简化开发流程，并且可以根据需要自定义配置。`webpack-spritesmith`是一个常用的Webpack插件，可以帮助自动处理雪碧图。\n\n### 4. 图标类型资源推荐使用 iconfont\n\n如果你有很多图标类型的图片资源，并且想使用`iconfont`来处理这些资源，可以按照以下步骤进行处理：\n\n- 获取图标资源：首先，你需要获取你想要的图标资源。你可以从`iconfont`网站或其他图标库中选择和下载符合需求的图标。这个没有啥好说的，直接推荐: https://www.iconfont.cn/\n\n- 生成字体文件：接下来，你需要将这些图标转换成字体文件。你可以使用`iconfont`提供的在线转换工具，将图标文件上传并生成字体文件（包括`.ttf`、`.eot`、`.woff`和`.svg`格式）。\n\n- 引入字体文件：将生成的字体文件下载到本地，并在你的项目中引入。通常，你需要在CSS文件中通过`@font-face`规则引入字体文件，并为字体定义一个唯一的名称。\n\n- 使用图标：一旦字体文件引入成功，你可以在CSS中通过设置`content`属性来使用图标。每个图标都会有一个对应的Unicode代码，你可以在`iconfont`提供的网站或字体文件中找到对应图标的Unicode代码，并通过设置`content`属性的值为该Unicode代码来使用图标。\n\n以下是一个简单的示例，以帮助你更好地理解：\n\n```css\n@font-face {\n font-family: 'iconfont';\n src: url('path/to/iconfont.eot'); /* 引入字体文件 */\n /* 其他格式的字体文件 */\n}\n\n.icon {\n font-family: 'iconfont'; /* 使用定义的字体名称 */\n font-size: 16px; /* 图标大小 */\n line-height: 1; /* 图标行高 */\n}\n\n.icon-facebook::before {\n content: '\\e001'; /* 使用Unicode代码表示想要显示的图标 */\n}\n\n.icon-twitter::before {\n content: '\\e002'; /* 使用Unicode代码表示想要显示的图标 */\n}\n\n.icon-instagram::before {\n content: '\\e003'; /* 使用Unicode代码表示想要显示的图标 */\n}\n```\n\n在上述示例中，我们首先通过`@font-face`引入了字体文件，并为字体定义了一个名称`iconfont`。然后，我们使用该名称作为`font-family`属性的值，以便在`.icon`类中使用该字体。最后，我们通过在`::before`伪元素中设置`content`属性为图标的Unicode代码，来显示相应的图标。\n\n在HTML中，你可以像下面这样使用对应的CSS类来显示相应的图标：\n\n```html\n\n\n\n```\n\n通过上述步骤，你可以使用`iconfont`来处理你的图标资源，并在项目中方便地使用它们。确保在CSS中设置了图标的字体大小和行高，以便正确显示图标。\n\n\n### 5. 使用 base64 格式\n\n**实际开发过程中，为何会考虑 base64 ？**\n\n使用Base64图片的优势有以下几点：\n\n- **减少HTTP请求数量**：通常情况下，每个网页都需要加载多张图片，因此会发送多个HTTP请求来获取这些图片文件。使用Base64图片可以将图片数据嵌入到CSS或HTML文件中，减少了对服务器的请求次数，从而提高网页加载速度。\n\n- **减少图片文件的大小**：Base64是一种编码方式，可以将二进制数据转换成文本字符串。通过使用Base64，可以将图片文件转换成文本字符串，并将其嵌入到CSS或HTML文件中。相比于直接引用图片文件，Base64编码的字符串通常会更小，因此可以减少图片文件的大小，从而减少了网页的总体积，加快了网页加载速度。\n\n- **简化部署和维护**：将图片数据嵌入到CSS或HTML文件中，可以减少文件的数量和复杂性，使得部署和维护变得更加简单和方便。此外，也不需要处理图片文件的路径和引用相关的问题。\n\n- **实现一些特殊效果**：通过Base64图片，可以实现一些特殊的效果，例如页面背景渐变、图标的使用等。这样可以避免使用额外的图片文件，简化了开发过程。\n\n上面虽然说饿了挺多有点，但是劣势也是很明显：\n\n- **增加了文本文件的体积**：因为Base64编码将二进制数据转换成文本字符串，所以会增加CSS或HTML文件的体积。在图片较大或数量较多时，这可能会导致文件变得庞大，从而导致网页加载速度变慢。\n\n- **缓存问题**：由于Base64图片被嵌入到了CSS或HTML文件中，如果图片内容有更新，那么整个文件都需要重新加载，而无法使用缓存。相比于独立的图片文件，Base64图片对缓存的利用效率较低。\n\n使用Base64图片在一些特定的场景下可以提供一些优势，但也需要权衡其带来的一些缺点。在实际开发中，可以根据具体的需求和情况，选择是否使用Base64图片。所以**建议复用性很强, 变更率较低，且小于 10KB 的图片文件，可以考虑 base64**\n\n**如何使用**？有要介绍一下 webpack 插件了： `url-loader` 或 `file-loader`\n\n**要使用Webpack将图片自动转换为Base64编码，您需要执行以下步骤**：\n\n1. 安装依赖：首先，确保您已经安装了`url-loader`或`file-loader`，它们是Webpack的两个常用的加载器。\n\n```bash\nnpm install url-loader --save-dev\n```\n\n2. 配置Webpack：在Webpack的配置文件中，添加对图片文件的处理规则。您可以在`module.rules`数组中添加一个新的规则，以匹配图片文件的后缀。\n\n```javascript\nmodule.exports = {\n // ...\n module: {\n rules: [\n // ...\n {\n test: /\\.(png|jpe?g|gif)$/i,\n use: [\n {\n loader: 'url-loader',\n options: {\n limit: 8192, // 设置图片大小的阈值，小于该值的图片会被转为Base64\n outputPath: 'images', // 输出路径\n publicPath: 'images', // 资源路径\n },\n },\n ],\n },\n ],\n },\n // ...\n};\n```\n\n 在上面的示例中，配置了一个处理`png`、`jpeg`、`jpg`和`gif`格式图片的规则。使用`url-loader`加载器，并设置了一些选项，例如`limit`限制了图片大小的阈值，小于该值的图片将会被转换为Base64编码。\n\n3. 在代码中引用图片：在您的代码中，可以像引用普通图片一样引用图片文件，Webpack会根据配置自动将其转换为Base64编码。\n\n```javascript\nimport imgSrc from './path/to/image.png';\n\nconst imgElement = document.createElement('img');\nimgElement.src = imgSrc;\ndocument.body.appendChild(imgElement);\n```\n\n4. 构建项目：最后，使用Webpack构建项目，它会根据配置自动将符合规则的图片文件转换为Base64编码，并将其嵌入到生成的输出文件中。\n\n```bash\nnpx webpack\n```\n\n这样，Webpack就会自动将图片转换为Base64编码，并将其嵌入到生成的输出文件中。请注意，在使用Base64图片时，需要权衡文件大小和性能，适度使用Base64编码，避免过大的文件导致网页加载变慢。\n\n\n### 6. 使用 CDN 加载图片\n\nCND 加载图片优势非常明显：\n\n- 加速网页加载速度：CDN通过将图片资源分布在全球的多个节点上，使用户能从离自己最近的节点获取资源，从而大大减少了网络延迟和加载时间。这可以提高网页的加载速度和用户体验。\n\n- 减轻服务器负载：CDN充当了一个缓冲层，当用户请求图片资源时，CDN会将图片资源从源服务器获取并缓存在节点中，下次再有用户请求同一资源时，CDN会直接从节点返回，减少了对源服务器的请求，分担了服务器的负载。\n\n- 提高并发性能：CDN节点分布在不同地区，用户请求图片资源时可以从离他们最近的节点获取，这可以减少网络拥塞和并发请求，提高了并发性能。\n\n- 节省带宽成本：CDN的节点之间会自动选择最优路径，有效利用了带宽资源，减少了数据传输的成本，尤其在大量图片资源请求时，能够带来显著的成本节省。\n\n- 提供高可用性：CDN通过分布式存储和负载均衡技术，提供了高可用性和容错能力。即使某个节点或源服务器发生故障，CDN会自动切换到其他可用节点，确保用户能够正常访问图片资源。\n\n总之，使用CDN加载图片可以提高网页加载速度、降低服务器负载、提高并发性能、节省带宽成本，并提供高可用性，从而改善用户体验和网站性能。\n\n\n### 7. 图片懒加载\n\n图片懒加载是一种在网站或应用中延迟加载图片的技术。它的主要目的是减少页面的初始加载时间，并提高用户的浏览体验。\n\n- 原理：图片懒加载的原理是只在用户需要时加载图片，而不是在页面初始加载时全部加载。这通常通过将图片的真实地址存储在自定义属性（例如`data-src`）中，而不是在`src`属性中。然后，在图片进入浏览器视图时，通过JavaScript动态将`data-src`的值赋给`src`属性，触发图片的加载。\n\n- 优势：图片懒加载可以显著减少初始页面的加载时间，特别是当页面中有大量图片时。它使页面加载变得更快，提高了用户的浏览体验。此外，懒加载还可以节省带宽和减轻服务器负载，因为只有当图片进入视图时才会加载。\n\n- 实现方法：图片懒加载可以通过纯JavaScript实现，也可以使用现成的JavaScript库，如`LazyLoad.js、Intersection Observer API等`。这些库提供了方便的API和配置选项，可以自定义懒加载的行为和效果。\n\n- 最佳实践：在使用图片懒加载时，可以考虑一些最佳实践。例如，设置一个占位符或加载中的动画，以提供更好的用户体验。另外，确保在不支持JavaScript的情况下仍然可用，并为可访问性提供替代文本（alt属性）。此外，对于移动设备，可以考虑使用响应式图片来适应不同的屏幕分辨率。\n\n**实现举例**：\n\n图片懒加载可以延迟图片的加载，只有当图片即将进入视口范围时才进行加载。这可以大大减轻页面的加载时间，并降低带宽消耗，提高了用户的体验。以下是一些常见的实现方法：\n\n1. Intersection Observer API\n\n`Intersection Observer API` 是一种用于异步检查文档中元素与视口叠加程度的API。可以将其用于检测图片是否已经进入视口，并根据需要进行相应的处理。\n\n```js\nlet observer = new IntersectionObserver(function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n const lazyImage = entry.target;\n lazyImage.src = lazyImage.dataset.src;\n observer.unobserve(lazyImage);\n }\n });\n});\n\nconst lazyImages = [...document.querySelectorAll(\".lazy\")];\nlazyImages.forEach(function (image) {\n observer.observe(image);\n});\n```\n\n2. 自定义监听器\n\n或者，可以通过自定义监听器来实现懒加载。其中，应该避免在滚动事件处理程序中频繁进行图片加载，因为这可能会影响性能。相反，使用自定义监听器只会在滚动停止时进行图片加载。\n\n```js\nfunction lazyLoad() {\n const images = document.querySelectorAll(\".lazy\");\n const scrollTop = window.pageYOffset;\n images.forEach((img) => {\n if (img.offsetTop < window.innerHeight + scrollTop) {\n img.src = img.dataset.src;\n img.classList.remove(\"lazy\");\n }\n });\n}\n\nlet lazyLoadThrottleTimeout;\ndocument.addEventListener(\"scroll\", function () {\n if (lazyLoadThrottleTimeout) {\n clearTimeout(lazyLoadThrottleTimeout);\n }\n lazyLoadThrottleTimeout = setTimeout(lazyLoad, 20);\n});\n```\n\n在这个例子中，我们使用了 `setTimeout()` 函数来延迟图片的加载，以避免在滚动事件的频繁触发中对性能的影响。\n\n无论使用哪种方法，都需要为需要懒加载的图片设置占位符，并将未加载的图片路径保存在 `data` 属性中，以便在需要时进行加载。这些占位符可以是简单的 div 或样式类，用于预留图片的空间，避免页面布局的混乱。\n\n```html\n\n

\n\n\n $\"预览图\"$ \n```\n\n### 8. 图片预加载\n\n图片预加载是一种在网站或应用中提前加载图片资源的技术。它的主要目的是在用户实际需要加载图片之前，将其提前下载到浏览器缓存中。\n\n图片预加载通常是在页面加载过程中或在特定事件触发前异步加载图片资源。通过使用 `JavaScript`，可以在网页DOM元素中创建一个新的`Image`对象，并将要预加载的图片的URL赋值给该对象的`src`属性。浏览器在加载过程中会提前下载这些图片，并将其缓存起来，以备将来使用。\n\n图片预加载可以使用原生JavaScript实现，也可以使用现成的JavaScript库，如`Preload.js、LazyLoad.js`等。这些库提供了方便的API和配置选项，可以灵活地控制预加载的行为和效果。\n\n实现图片预加载可以使用原生JavaScript或使用专门的JavaScript库。**下面分别介绍两种方式的实现方法**：\n\n1. 使用原生JavaScript实现图片预加载：\n\n```javascript\nfunction preloadImage(url) {\n return new Promise(function(resolve, reject) {\n var img = new Image();\n img.onload = resolve;\n img.onerror = reject;\n img.src = url;\n });\n}\n\n// 调用预加载函数\npreloadImage('image.jpg')\n .then(function() {\n console.log('图片加载成功');\n // 在此处可以执行加载成功后的操作，例如显示图片等\n })\n .catch(function() {\n console.error('图片加载失败');\n // 在此处可以执行加载失败后的操作，例如显示错误信息等\n });\n```\n\n在上述代码中，我们定义了一个`preloadImage`函数，它使用`Image`对象来加载图片资源。通过`onload`事件和`onerror`事件来监听图片加载完成和加载错误的情况，并使用Promise对象进行异步处理。\n\n2. 使用JavaScript库实现图片预加载：\n\n使用JavaScript库可以更简便地实现图片预加载，并提供更多的配置选项和功能。以下以Preload.js库为例进行说明：\n\n首先，在HTML文件中引入Preload.js库：\n\n```html\n\n```\n\n然后，在JavaScript代码中使用Preload.js库来进行图片预加载：\n\n```javascript\nvar preload = new createjs.LoadQueue();\npreload.on(\"complete\", handleComplete);\npreload.on(\"error\", handleError);\npreload.loadFile('image.jpg');\n\nfunction handleComplete() {\n console.log('图片加载成功');\n // 在此处可以执行加载成功后的操作，例如显示图片等\n}\n\nfunction handleError() {\n console.error('图片加载失败');\n // 在此处可以执行加载失败后的操作，例如显示错误信息等\n}\n```\n\n在上述代码中，我们首先创建一个`LoadQueue`对象，并使用`on`方法来监听加载完成和加载错误的事件。然后使用`loadFile`方法来指定要预加载的图片资源的URL。\n\n当图片加载完成时，`handleComplete`函数会被调用，我们可以在此处执行加载成功后的操作。当图片加载错误时，`handleError`函数会被调用，我们可以在此处执行加载失败后的操作。\n\n以上是两种常用的实现图片预加载的方法，根据具体需求和项目情况选择合适的方式来实现图片预加载。\n\n### 9. 响应式加载图片\n要在不同分辨率的设备上显示不同尺寸的图片，你可以使用`