光学中cra_默认情况下，CRA App是否在捆绑包中包含SVG？

光学中cra

The 16.x version of react brought with it the capability of creating a bundle of the application files and serving it in multiple chunks. The lazy-loading became easier. It gave us the privilege of code splitting and avoid fetching unnecessary modules and files from the server.

react的16.x版本带来了创建捆绑的应用程序文件并将其以多个块形式提供的功能。 延迟加载变得更加容易。 它为我们提供了代码拆分的特权，并避免了从服务器获取不必要的模块和文件。

With all the things said above, the chunk size can be reduced, which can result in performance improvement. Even though we can achieve a significant improvement in performance by using the code splitting feature intelligently. ✅ JS files can be served into chunks. ✅CSS files can be served into chunks.

综上所述，可以减小块的大小，从而可以提高性能。 即使我们可以通过智能地使用代码拆分功能来显着提高性能。 ✅JS文件可以分成小块。 ✅CSS文件可以分成小块。

What about the images?

图像呢？

Does the default webpack configuration for a react application created with CRA include svg files too in chunking?

使用CRA创建的React应用程序的默认Webpack配置是否也在分块中也包含svg文件？

I realized even though I had used the import statement for getting the SVG images, there were still one browser request per image. Sending extra requests to fetch SVG images is definitely not a great idea. Specially, if there are number of images on the page.

我意识到即使我已经使用import语句获取SVG图像，但每个图像仍然有一个浏览器请求。 发送额外的请求以获取SVG图像绝对不是一个好主意。 特别是，如果页面上有许多图像。

To reduce the calls, i tried using SVG sprites. That works, but still there should be a way to bundle the svg images with JS right? After digging somewhat, I came across SVGR library which could help us to use the SVG Images as React Component.

为了减少通话，我尝试使用SVG精灵。 那行得通，但是仍然应该有一种将svg图像与JS捆绑在一起的方法，对吗？ 经过一些挖掘之后，我遇到了SVGR库，它可以帮助我们将SVG图像用作React组件。

import React from 'react'const SvgComponent = props => (<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 257.002 297.5" {...props} >
<g transform="matrix(0.8526811,0,0,0.8526811,18.930632,21.913299)">
<polygon points="8.003,218.496 0,222.998 0,74.497 8.003,78.999 8.003,218.496 "/>
<polygon points="128.501,287.998 128.501,297.5 0,222.998 8.003,218.496 128.501,287.998 "/>
<polygon points="249.004,218.496 257.002,222.998 128.501,297.5 128.501,287.998 249.004,218.496 "/>
<polygon points="249.004,78.999 257.002,74.497 257.002,222.998 249.004,218.496 249.004,78.999 "/>
<polygon points="128.501,9.497 128.501,0 257.002,74.497 249.004,78.999 128.501,9.497 "/>
<polygon points="8.003,78.999 0,74.497 128.501,0 128.501,9.497 8.003,78.999 "/>
</g>
</svg>
)export default SvgComponent

This way, when we import and use it as a component, it can be controlled and maintained easily along with bundling.

这样，当我们将其导入并用作组件时，可以很容易地将其与捆绑一起进行控制和维护。

But wouldn’t it be nice if we would have got this feature by default in our application scaffolded by CRA? And please no ejection!!! 🙏

但是，如果我们在CRA支持的应用程序中默认情况下拥有此功能，那不是很好吗？ 而且请不要弹出！！！ 🙏

🎉 🎉We have SVGR already configured with Webpack 4 as a plugin.. 🎉

have🎉我们已经将SVGR和Webpack 4配置为插件。

Let’s see how?

让我们看看如何？

/** added in webpack.config.js by default by CRA */svg: {ReactComponent:'@svgr/webpack?-svgo,+titleProp,+ref![path]',}

☑️ good news !! No ejection of webpack config needed.

☑️ 好消息!! 无需弹出webpack配置。

让我们看看它是如何工作的 (Let’s see how it works ❓)

/** code excerpt from one of the react scripts */
import * as React from 'react';export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>;const src: string;export default src;

Whenever a SVG file is encountered, it is converted as the above functional component by the SVGR.

每当遇到SVG文件时，SVGR都会将其转换为上述功能组件。

As we can see, it exports the src string by default.

如我们所见，默认情况下它将导出src字符串。

Hence in import MyIcon from “../icon.svg”, MyIcon has only the source path. And that’s the reason, it doesn’t get included in the bundle since we are just replacing the string and not the image.

因此，在从“ ../icon.svg”导入MyIcon时， MyIcon仅具有源路径。 这就是原因，因为我们只是替换字符串而不是图像，所以它不包含在捆绑包中。

其他ReactComponent导出了什么？ (What is the other ReactComponent exported?)

ReactComponent is the functionalComponent which exposes the SVG Icon as a component and makes it easier to work with. And above all, since its a component, it can be taken into consideration for creating the chunks which can result in components smaller than the image itself. YAYYY!! So no SVG Sprites needed, and our problem is also solved.

ReactComponent是functionalComponent，它将SVG图标作为组件公开，并使其更易于使用。 最重要的是，由于它是一个组件，因此可以考虑创建块，从而导致组件小于图像本身。 呀！ 因此，不需要SVG Sprite，我们的问题也得到解决。

How to use it?

如何使用它？

import {ReactComponent as MyIcon} from "../assets/images/icon.svg";
import {ReactComponent as MyIcon} from "../assets/images/icon2.svg";....
<MyIcon className="my-class" title="Any text which will be shown on hover" />
....

Difference between using the src and this as a ReactComponent.

使用src和this作为ReactComponent之间的区别。

If we use src in an img tag, the svg will be fetched from the source URL, while the ReactComponent renders the SVG image inline.

如果我们在img标签中使用src，则将从源URL中获取svg，而ReactComponent会内联呈现SVG图像。

优点？ (The Advantages?)

✔️ Size reduction: The conversion to ReactComponent is smaller than the SVg itself.

✔️尺寸减小：到ReactComponent的转换比SVg本身小。

✔️ Since its a component, therefore, easy to use and handle and rendered inline therefore we can control it easily.

✔️由于它是一个组件，因此易于使用，处理和内嵌渲染，因此我们可以轻松控制它。

✔️ SVG images bundled with JS, therefore no extra fetch browser calls, not even SVG Sprites needed.

✔️SVG图像与JS捆绑在一起，因此不需要额外的获取浏览器调用，甚至不需要SVG Sprites。

✔️ Converting SVG to a component can be helpful in customizing the images.

✔️将SVG转换为组件有助于自定义图像。

With enough said, the bottom line is we do not need to take extra care of the SVGs anymore. CRA has already provided a way to do it. And if not CRA, simple webpack configuration should be able to handle it.

话虽如此，最重要的是我们不再需要特别注意SVG。 CRA已经提供了一种方法。 如果不是CRA，则简单的Webpack配置应该可以处理它。

翻译自: https://medium.com/swlh/does-cra-app-include-svgs-in-the-bundle-by-default-e03f626562f5

光学中cra