1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[334],{79272:function(e,t,n){n.r(t),n.d(t,{_frontmatter:function(){return p},default:function(){return l}});var o=n(20765),a=(n(2784),n(94099)),r=["components"],p={name:"Bundling",menu:"Guides",route:"/guides/bundling",description:"Learn how to import and bundle components-extra."},s={_frontmatter:p};function l(e){var t=e.components,n=(0,o.Z)(e,r);return(0,a.kt)("wrapper",Object.assign({},s,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",null,"Bundling components-extra in your project"),(0,a.kt)("h2",null,"Optimizing bundle size"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"components-extra")," is tree-shakeable, meaning that you can import its components as named imports, like this:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},"import { BackToTop } from 'components-extra'\n")),(0,a.kt)("p",null,"If your bundler is set up to use the tree-shakeable libraries, it will automatically ",(0,a.kt)("strong",{parentName:"p"},"only add the named imports\nyou used"),". In this example, only the ",(0,a.kt)("inlineCode",{parentName:"p"},"<BackToTop>")," button will be included in your bundle."),(0,a.kt)("p",null,"Else, if your bundler is not set up to do tree-shaking, you can still only include the components you need\nby importing them as defaults like this:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},"import BackToTop from 'components-extra/components/BackToTop'\n")),(0,a.kt)("blockquote",null,(0,a.kt)("p",{parentName:"blockquote"},(0,a.kt)("strong",{parentName:"p"},"Note:")," you will need a transpiler like ",(0,a.kt)("a",{parentName:"p",href:"https://babeljs.io/"},"babel")," to make the JS work in the browser. (Even if es6 is coming soon to moder broswers).\nSome projects templates (like ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/facebook/create-react-app"},"create-react-app"),") handle this for you by default.")),(0,a.kt)("h2",null,"es5"),(0,a.kt)("p",null,"If your project is not set up to transpile the ",(0,a.kt)("strong",{parentName:"p"},"esm/es")," builds, you can still use the ",(0,a.kt)("strong",{parentName:"p"},"cjs"),", written in es5:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},'const BackToTop = require("components-extra").BackToTop\n')),(0,a.kt)("blockquote",null,(0,a.kt)("p",{parentName:"blockquote"},(0,a.kt)("strong",{parentName:"p"},"Note:")," you can also set up aliases in your project to alias ",(0,a.kt)("inlineCode",{parentName:"p"},"components-extra/components")," to ",(0,a.kt)("inlineCode",{parentName:"p"},"components-extra")," if you want imports to\nlook like ",(0,a.kt)("inlineCode",{parentName:"p"},"import BackToTop from 'components-extra/BackToTop'"),". You can check out how to do this with ",(0,a.kt)("a",{parentName:"p",href:"https://webpack.js.org/configuration/resolve/"},"webpack"),"\nand with ",(0,a.kt)("a",{parentName:"p",href:"https://www.npmjs.com/package/babel-plugin-module-resolver"},"babel"),".")))}l.isMDXComponent=!0}}]); 2//# sourceMappingURL=component---src-pages-guides-bundling-mdx-9a4e636180ef0425b7b9.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.