create-react-app/7b4168bb.caf26777.js

/*! For license information please see 7b4168bb.caf26777.js.LICENSE */
(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{145:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return a})),n.d(t,"rightToc",(function(){return c})),n.d(t,"metadata",(function(){return l})),n.d(t,"default",(function(){return p}));var r=n(1),i=n(9),o=(n(178),n(177)),a={id:"production-build",title:"Creating a Production Build"},c=[{value:"Static File Caching",id:"static-file-caching",children:[]},{value:"Profiling",id:"profiling",children:[]}],l={id:"production-build",title:"Creating a Production Build",description:"`npm run build` creates a `build` directory with a production build of your app. Inside the `build/static` directory will be your JavaScript and CSS files. Each filename inside of `build/static` will contain a unique hash of the file contents. This hash in the file name enables [long term caching techniques](#static-file-caching).",source:"@site/../docs/production-build.md",permalink:"/docs/production-build",editUrl:"https://github.com/facebook/create-react-app/edit/master/docusaurus/website/../docs/production-build.md",lastUpdatedBy:"Jacob M-G Evans",lastUpdatedAt:1570074821,sidebar:"docs",previous:{title:"Making a Progressive Web App",permalink:"/docs/making-a-progressive-web-app"},next:{title:"Running Tests",permalink:"/docs/running-tests"}},u={rightToc:c,metadata:l},s="wrapper";function p(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(o.b)(s,Object(r.a)({},u,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"npm run build")," creates a ",Object(o.b)("inlineCode",{parentName:"p"},"build")," directory with a production build of your app. Inside the ",Object(o.b)("inlineCode",{parentName:"p"},"build/static")," directory will be your JavaScript and CSS files. Each filename inside of ",Object(o.b)("inlineCode",{parentName:"p"},"build/static")," will contain a unique hash of the file contents. This hash in the file name enables ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"#static-file-caching"}),"long term caching techniques"),"."),Object(o.b)("p",null,"When running a production build of freshly created Create React App application, there are a number of ",Object(o.b)("inlineCode",{parentName:"p"},".js")," files (called ",Object(o.b)("em",{parentName:"p"},"chunks"),") that are generated and placed in the ",Object(o.b)("inlineCode",{parentName:"p"},"build/static/js")," directory:"),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"main.[hash].chunk.js")),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"This is your ",Object(o.b)("em",{parentName:"li"},"application")," code. ",Object(o.b)("inlineCode",{parentName:"li"},"App.js"),", etc.")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"[number].[hash].chunk.js")),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"These files can either be ",Object(o.b)("em",{parentName:"li"},"vendor")," code, or ",Object(o.b)("a",Object(r.a)({parentName:"li"},{href:"/docs/code-splitting"}),"code splitting chunks"),". ",Object(o.b)("em",{parentName:"li"},"Vendor")," code includes modules that you've imported from within ",Object(o.b)("inlineCode",{parentName:"li"},"node_modules"),". One of the potential advantages with splitting your ",Object(o.b)("em",{parentName:"li"},"vendor")," and ",Object(o.b)("em",{parentName:"li"},"application")," code is to enable ",Object(o.b)("a",Object(r.a)({parentName:"li"},{href:"#static-file-caching"}),"long term caching techniques")," to improve application loading performance. Since ",Object(o.b)("em",{parentName:"li"},"vendor")," code tends to change less often than the actual ",Object(o.b)("em",{parentName:"li"},"application")," code, the browser will be able to cache them separately, and won't re-download them each time the app code changes.")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"runtime-main.[hash].js")),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"This is a small chunk of ",Object(o.b)("a",Object(r.a)({parentName:"li"},{href:"https://webpack.js.org/configuration/optimization/#optimization-runtimechunk"}),"webpack runtime")," logic which is used to load and run your application. The contents of this will be embedded in your ",Object(o.b)("inlineCode",{parentName:"li"},"build/index.html")," file by default to save an additional network request. You can opt out of this by specifying ",Object(o.b)("inlineCode",{parentName:"li"},"INLINE_RUNTIME_CHUNK=false")," as documented in our ",Object(o.b)("a",Object(r.a)({parentName:"li"},{href:"/docs/advanced-configuration"}),"advanced configuration"),", which will load this chunk instead of embedding it in your ",Object(o.b)("inlineCode",{parentName:"li"},"index.html"),".")),Object(o.b)("p",null,"If you're using ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"/docs/code-splitting"}),"code splitting")," to split up your application, this will create additional chunks in the ",Object(o.b)("inlineCode",{parentName:"p"},"build/static")," folder as well."),Object(o.b)("h2",{id:"static-file-caching"},"Static File Caching"),Object(o.b)("p",null,"Each file inside of the ",Object(o.b)("inlineCode",{parentName:"p"},"build/static")," directory will have a unique hash appended to the filename that is generated based on the contents of the file, which allows you to use ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#invalidating_and_updating_cached_responses"}),"aggressive caching techniques")," to avoid the browser re-downloading your assets if the file contents haven't changed. If the contents of a file changes in a subsequent build, the filename hash that is generated will be different."),Object(o.b)("p",null,"To deliver the best performance to your users, it's best practice to specify a ",Object(o.b)("inlineCode",{parentName:"p"},"Cache-Control")," header for ",Object(o.b)("inlineCode",{parentName:"p"},"index.html"),", as well as the files within ",Object(o.b)("inlineCode",{parentName:"p"},"build/static"),". This header allows you to control the length of time that the browser as well as CDNs will cache your static assets. If you aren't familiar with what ",Object(o.b)("inlineCode",{parentName:"p"},"Cache-Control")," does, see ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://jakearchibald.com/2016/caching-best-practices/"}),"this article")," for a great introduction."),Object(o.b)("p",null,"Using ",Object(o.b)("inlineCode",{parentName:"p"},"Cache-Control: max-age=31536000")," for your ",Object(o.b)("inlineCode",{parentName:"p"},"build/static")," assets, and ",Object(o.b)("inlineCode",{parentName:"p"},"Cache-Control: no-cache")," for everything else is a safe and effective starting point that ensures your user's browser will always check for an updated ",Object(o.b)("inlineCode",{parentName:"p"},"index.html")," file, and will cache all of the ",Object(o.b)("inlineCode",{parentName:"p"},"build/static")," files for one year. Note that you can use the one year expiration on ",Object(o.b)("inlineCode",{parentName:"p"},"build/static")," safely because the file contents hash is embedded into the filename."),Object(o.b)("h2",{id:"profiling"},"Profiling"),Object(o.b)("p",null,"ReactDOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small\nadditional overhead it is opt-in for production mode. You can opt-in by using the ",Object(o.b)("inlineCode",{parentName:"p"},"--profile")," flag. Use ",Object(o.b)("inlineCode",{parentName:"p"},"npm run build -- --profile")," or ",Object(o.b)("inlineCode",{parentName:"p"},"yarn build --profile")," to enable profiling in the production build. See the ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-devtools-profiler"}),"React docs")," for details about profiling\nusing the React DevTools."))}p.isMDXComponent=!0},177:function(e,t,n){"use strict";n.d(t,"a",(function(){return c})),n.d(t,"b",(function(){return p}));var r=n(0),i=n.n(r),o=i.a.createContext({}),a=function(e){var t=i.a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):Object.assign({},t,e)),n},c=function(e){var t=a(e.components);return i.a.createElement(o.Provider,{value:t},e.children)};var l="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},s=Object(r.forwardRef)((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,l=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&-1===t.indexOf(r)&&(n[r]=e[r]);return n}(e,["components","mdxType","originalType","parentName"]),s=a(n),p=r,f=s[c+"."+p]||s[p]||u[p]||o;return n?i.a.createElement(f,Object.assign({},{ref:t},l,{components:n})):i.a.createElement(f,Object.assign({},{ref:t},l))}));function p(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,a=new Array(o);a[0]=s;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c[l]="string"==typeof e?e:r,a[1]=c;for(var p=2;p<o;p++)a[p]=n[p];return i.a.createElement.apply(null,a)}return i.a.createElement.apply(null,n)}s.displayName="MDXCreateElement"},178:function(e,t,n){"use strict";e.exports=n(179)},179:function(e,t,n){"use strict";var r=n(180),i="function"==typeof Symbol&&Symbol.for,o=i?Symbol.for("react.element"):60103,a=i?Symbol.for("react.portal"):60106,c=i?Symbol.for("react.fragment"):60107,l=i?Symbol.for("react.strict_mode"):60108,u=i?Symbol.for("react.profiler"):60114,s=i?Symbol.for("react.provider"):60109,p=i?Symbol.for("react.context"):60110,f=i?Symbol.for("react.forward_ref"):60112,d=i?Symbol.for("react.suspense"):60113;i&&Symbol.for("react.suspense_list");var b=i?Symbol.for("react.memo"):60115,h=i?Symbol.for("react.lazy"):60116;i&&Symbol.for("react.fundamental"),i&&Symbol.for("react.responder"),i&&Symbol.for("react.scope");var m="function"==typeof Symbol&&Symbol.iterator;function y(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var g={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},j={};function O(e,t,n){this.props=e,this.context=t,this.refs=j,this.updater=n||g}function v(){}function w(e,t,n){this.props=e,this.context=t,this.refs=j,this.updater=n||g}O.prototype.isReactComponent={},O.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(y(85));this.updater.enqueueSetState(this,e,t,"setState")},O.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},v.prototype=O.prototype;var C=w.prototype=new v;C.constructor=w,r(C,O.prototype),C.isPureReactComponent=!0;var N={current:null},k={current:null},S=Object.prototype.hasOwnProperty,_={key:!0,ref:!0,__self:!0,__source:!0};function x(e,t,n){var r,i={},a=null,c=null;if(null!=t)for(r in void 0!==t.ref&&(c=t.ref),void 0!==t.key&&(a=""+t.key),t)S.call(t,r)&&!_.hasOwnProperty(r)&&(i[r]=t[r]);var l=arguments.length-2;if(1===l)i.children=n;else if(1<l){for(var u=Array(l),s=0;s<l;s++)u[s]=arguments[s+2];i.children=u}if(e&&e.defaultProps)for(r in l=e.defaultProps)void 0===i[r]&&(i[r]=l[r]);return{$$typeof:o,type:e,key:a,ref:c,props:i,_owner:k.current}}function E(e){return"object"==typeof e&&null!==e&&e.$$typeof===o}var P=/\/+/g,R=[];function T(e,t,n,r){if(R.length){var i=R.pop();return i.result=e,i.keyPrefix=t,i.func=n,i.context=r,i.count=0,i}return{result:e,keyPrefix:t,func:n,context:r,count:0}}function $(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>R.length&&R.push(e)}function q(e,t,n){return null==e?0:function e(t,n,r,i){var c=typeof t;"undefined"!==c&&"boolean"!==c||(t=null);var l=!1;if(null===t)l=!0;else switch(c){case"string":case"number":l=!0;break;case"object":switch(t.$$typeof){case o:case a:l=!0}}if(l)return r(i,t,""===n?"."+I(t,0):n),1;if(l=0,n=""===n?".":n+":",Array.isArray(t))for(var u=0;u<t.length;u++){var s=n+I(c=t[u],u);l+=e(c,s,r,i)}else if(null===t||"object"!=typeof t?s=null:s="function"==typeof(s=m&&t[m]||t["@@iterator"])?s:null,"function"==typeof s)for(t=s.call(t),u=0;!(c=t.next()).done;)l+=e(c=c.value,s=n+I(c,u++),r,i);else if("object"===c)throw r=""+t,Error(y(31,"[object Object]"===r?"object with keys {"+Object.keys(t).join(", ")+"}":r,""));return l}(e,"",t,n)}function I(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,(function(e){return t[e]}))}(e.key):t.toString(36)}function A(e,t){e.func.call(e.context,t,e.count++)}function U(e,t,n){var r=e.result,i=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?M(e,r,n,(function(e){return e})):null!=e&&(E(e)&&(e=function(e,t){return{$$typeof:o,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(e,i+(!e.key||t&&t.key===e.key?"":(""+e.key).replace(P,"$&/")+"/")+n)),r.push(e))}function M(e,t,n,r,i){var o="";null!=n&&(o=(""+n).replace(P,"$&/")+"/"),q(e,U,t=T(t,o,r,i)),$(t)}function D(){var e=N.current;if(null===e)throw Error(y(321));return e}var F={Children:{map:function(e,t,n){if(null==e)return e;var r=[];return M(e,r,null,t,n),r},forEach:function(e,t,n){if(null==e)return e;q(e,A,t=T(null,null,t,n)),$(t)},count:function(e){return q(e,(function(){return null}),null)},toArray:function(e){var t=[];return M(e,t,null,(function(e){return e})),t},only:function(e){if(!E(e))throw Error(y(143));return e}},createRef:function(){return{current:null}},Component:O,PureComponent:w,createContext:function(e,t){return void 0===t&&(t=null),(e={$$typeof:p,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:s,_context:e},e.Consumer=e},forwardRef:function(e){return{$$typeof:f,render:e}},lazy:function(e){return{$$typeof:h,_ctor:e,_status:-1,_result:null}},memo:function(e,t){return{$$typeof:b,type:e,compare:void 0===t?null:t}},useCallback:function(e,t){return D().useCallback(e,t)},useContext:function(e,t){return D().useContext(e,t)},useEffect:function(e,t){return D().useEffect(e,t)},useImperativeHandle:function(e,t,n){return D().useImperativeHandle(e,t,n)},useDebugValue:function(){},useLayoutEffect:function(e,t){return D().useLayoutEffect(e,t)},useMemo:function(e,t){return D().useMemo(e,t)},useReducer:function(e,t,n){return D().useReducer(e,t,n)},useRef:function(e){return D().useRef(e)},useState:function(e){return D().useState(e)},Fragment:c,Profiler:u,StrictMode:l,Suspense:d,createElement:x,cloneElement:function(e,t,n){if(null==e)throw Error(y(267,e));var i=r({},e.props),a=e.key,c=e.ref,l=e._owner;if(null!=t){if(void 0!==t.ref&&(c=t.ref,l=k.current),void 0!==t.key&&(a=""+t.key),e.type&&e.type.defaultProps)var u=e.type.defaultProps;for(s in t)S.call(t,s)&&!_.hasOwnProperty(s)&&(i[s]=void 0===t[s]&&void 0!==u?u[s]:t[s])}var s=arguments.length-2;if(1===s)i.children=n;else if(1<s){u=Array(s);for(var p=0;p<s;p++)u[p]=arguments[p+2];i.children=u}return{$$typeof:o,type:e.type,key:a,ref:c,props:i,_owner:l}},createFactory:function(e){var t=x.bind(null,e);return t.type=e,t},isValidElement:E,version:"16.11.0",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentDispatcher:N,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:k,IsSomeRendererActing:{current:!1},assign:r}},L={default:F},z=L&&F||L;e.exports=z.default||z},180:function(e,t,n){"use strict";var r=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;function a(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(i){return!1}}()?Object.assign:function(e,t){for(var n,c,l=a(e),u=1;u<arguments.length;u++){for(var s in n=Object(arguments[u]))i.call(n,s)&&(l[s]=n[s]);if(r){c=r(n);for(var p=0;p<c.length;p++)o.call(n,c[p])&&(l[c[p]]=n[c[p]])}}return l}}}]);