1"use strict";(self.webpackChunkfarm_docs=self.webpackChunkfarm_docs||[]).push([[5813],{2040:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>u,frontMatter:()=>t,metadata:()=>l,toc:()=>a});var r=i(49214),s=i(36906);const t={},o="Build For Production",l={id:"tutorials/build",title:"Build For Production",description:"By default, Farm has enabled support for the following features for production builds:",source:"@site/docs/tutorials/3-build.md",sourceDirName:"tutorials",slug:"/tutorials/build",permalink:"/docs/tutorials/build",draft:!1,unlisted:!1,editUrl:"https://github.com/farm-fe/farm-fe.github.io/tree/main/docs/tutorials/3-build.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Develop With Farm",permalink:"/docs/tutorials/start"},next:{title:"DevServer and HMR",permalink:"/docs/features/dev-server"}},d={},a=[{value:"Configuring Output Dir",id:"configuring-output-dir",level:2},{value:"Preview Built Resources",id:"preview-built-resources",level:2},{value:"Browser Compatibility",id:"browser-compatibility",level:2},{value:"Configure Tree Shake and Minify",id:"configure-tree-shake-and-minify",level:2},{value:"Configure Partial Bundling",id:"configure-partial-bundling",level:2}];function c(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"build-for-production",children:"Build For Production"})}),"\n",(0,r.jsx)(n.p,{children:"By default, Farm has enabled support for the following features for production builds:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:(0,r.jsx)(n.code,{children:"Tree Shake"})}),": Crop and filter irrelevant modules and code"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:(0,r.jsx)(n.code,{children:"Compression"})}),": Compress and mangle the output resources."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:(0,r.jsx)(n.code,{children:"Automatically inject Polyfill"})}),": Farm downgrades to modern browsers(ES7) by default, if you need legacy browsers support, configuring ",(0,r.jsx)(n.a,{href:"/docs/config/compilation-options#output-targetenv",children:(0,r.jsx)(n.code,{children:"targetEnv"})})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:(0,r.jsx)(n.code,{children:"Automatic partial packaging"})}),": Based on dependencies and size, the project is partially bundled. For each resource request, about 25 resources are generated to ensure parallel loading performance and improve cache hits rate as much as possible."]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"configuring-output-dir",children:"Configuring Output Dir"}),"\n",(0,r.jsxs)(n.p,{children:["Add build script in ",(0,r.jsx)(n.code,{children:"package.json"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title="package.json" {7-8}',children:'{\n "name": "1-create-a-project",\n "version": "1.0.0",\n "scripts": {\n "test": "echo \\"Error: no test specified\\" && exit 1",\n "start": "farm start",\n "build": "farm build",\n "preview": "farm preview"\n },\n // ...ignore other fields\n}\n'})}),"\n",(0,r.jsxs)(n.p,{children:["Then execute ",(0,r.jsx)(n.code,{children:"npm run build"}),", the built resources will be emitted to ",(0,r.jsx)(n.code,{children:"build"})," dir:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-text",metastring:'title="Project Build Resource Structure"',children:"build\n\u251c\u2500 favicon.ico\n\u251c\u2500 index.html\n\u251c\u2500 index_02bc.bd68e90b.js\n\u251c\u2500 index_02bc.bd68e90b.js.map\n\u251c\u2500 index_1c74.4b50f73e.js\n\u251c\u2500 index_7734.440d56a3.js\n\u251c\u2500 index_880b.4631ecee.js\n\u251c\u2500 index_8d49.63f7b906.css\n\u251c\u2500 index_8d49.63f7b906.css.map\n\u251c\u2500 index_9025.84e1f8e6.js\n\u251c\u2500 index_ca37.f2c276ef.js\n\u251c\u2500 index_ef2f.e25349d8.js\n\u251c\u2500 index_f346.369a7312.js\n"})}),"\n",(0,r.jsx)(n.p,{children:"If you want to custom the path that the resources emitted to, you can use:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/docs/config/compilation-options#outputfilename",children:(0,r.jsx)(n.code,{children:"output.f
1ilename"})})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/docs/config/compilation-options#outputassetsfilename",children:(0,r.jsx)(n.code,{children:"output.assetsFilename"})})}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="farm.config.ts"',children:"import defineConfig from '@farmfe/core';\n\nexport default defineConfig({\n compilation: {\n output: {\n path: 'build',\n filename: 'assets/[name].[hash].[ext]',\n assetsFilename: 'static/[resourceName].[ext]'\n }\n }\n})\n"})}),"\n",(0,r.jsxs)(n.p,{children:["For above example, all ",(0,r.jsx)(n.code,{children:"js/css"})," will be emitted to ",(0,r.jsx)(n.code,{children:"build/assets/"}),"(example: ",(0,r.jsx)(n.code,{children:"build/assets/index-ea54.abbe3e.js"}),"). All static assets like image will be emitted to ",(0,r.jsx)(n.code,{children:"build/static"}),"(example: ",(0,r.jsx)(n.code,{children:"build/static/background.png"}),")"]}),"\n",(0,r.jsx)(n.h2,{id:"preview-built-resources",children:"Preview Built Resources"}),"\n",(0,r.jsxs)(n.p,{children:["After the resources built, you can preview them by ",(0,r.jsx)(n.code,{children:"npm run preview"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sh",children:"$ npm run preview\n\n> [email protected] preview\n> farm preview\n\n[ Farm ] Using config file at /root/tutorials/3-build-for-production/farm.config.ts\n[ Farm ] preview server running at: \n\n[ Farm ] > Local: http://localhost:1911/\n[ Farm ] > Network: http://198.18.0.1:1911/\n[ Farm ] > Network: http://10.242.197.146:1911/\n[ Farm ] > Network: http://192.168.1.31:1911/\n"})}),"\n",(0,r.jsxs)(n.p,{children:["open ",(0,r.jsx)(n.code,{children:"http://localhost:1911/"})," to preview your project."]}),"\n",(0,r.jsx)(n.h2,{id:"browser-compatibility",children:"Browser Compatibility"}),"\n",(0,r.jsxs)(n.p,{children:["By default, Farm build projects to Modern Browsers that natively support ",(0,r.jsx)(n.code,{children:"async/await"}),":"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Chrome >= 62"}),"\n",(0,r.jsx)(n.li,{children:"Firefox >= 63"}),"\n",(0,r.jsx)(n.li,{children:"Safari >= 13.1"}),"\n",(0,r.jsx)(n.li,{children:"Edge >= 79"}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["You can use ",(0,r.jsx)(n.a,{href:"/docs/config/compilation-options#output-targetenv",children:"output.targetEnv"})," to configuring your target browsers:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import { defineConfig } from '@farmfe/core';\n\nexport default defineConfig({\n compilation: {\n output: {\n targetEnv: 'browser-legacy'\n }\n }\n})\n"})}),"\n",(0,r.jsxs)(n.p,{children:["In above example, Farm will downgrade the syntax to ",(0,r.jsx)(n.code,{children:"es5"})," and inject polyfill automatically. Then we have to install ",(0,r.jsx)(n.code,{children:"core-js@3"})," to polyfill injection:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sh",children:"pnpm add -D core-js@3\n"})}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["You need to install ",(0,r.jsx)(n.code,{children:"core-js@3"})," manually if your target to legacy browsers."]}),"\n",(0,r.jsxs)(n.li,{children:["If you want to configure browsers targets more precisely, see ",(0,r.jsx)(n.a,{href:"/docs/advanced/polyfill",children:"Syntax Downgrade And Polyfill"})]}),"\n"]})}),"\n",(0,r.jsx)(n.h2,{id:"configure-tree-shake-and-minify",children:"Configure Tree Shake and Minify"}),"\n",(0,r.jsxs)(n.p,{children:["Production optimization like ",(0,r.jsx)(n.code,{children:"treeShake"})," and ",(0,r.jsx)(n.code,{children:"minify"})," are ",(0,r.jsx)(n.strong,{children:"disabled"})," by default in ",(0,r.jsx)(n.code,{children:"development"})," for performance reasons, and ",(0,r.jsx)(n.strong,{children:"enabled"})," by default in ",(0,r.jsx)(n.code,{children:"production"}),". But if ",(0,r.jsx)(n.code,{children:"treeShake"})," or ",(0,r.jsx)(n.code,{children:"minify"})," are configured manually, the default value will be used regardless of ",(0,r.jsx)(n.code,{children:"development"})," or ",(0,r.jsx)(n.code,{children:"production"}),"."]}),"\n",(0,r.jsx)(n.p,{children:"For details about tree shake and minify, see:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/docs/advanced/tree-shake",children:"Tree Shake"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/docs/advanced/minification",children:"Minification"})}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"configure-partial-bundling",children:"Configure Partial Bundling"}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsxs)(n.p,{children:["Refer to ",(0,r.jsx)(n.a,{href:"/docs/advanced/partial-bundling",children:"Partial Bundling"})," for details."]})}),"\n",(0,r.jsxs)(n.p,{children:["Farm enabled best practice of bundling already, make sure you really need to configure bundles manually. See ",(0,r.jsx)(n.a,{href:"/docs/advanced/partial-bundling",children:"Partial Bundling"})," for details."]})]})}function u(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}}}]);
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.