https://farm-nightly.netlify.app/assets/js/74c1950e.97228e69.js

1"use strict";(self.webpackChunkfarm_docs=self.webpackChunkfarm_docs||[]).push([[6769],{42500:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>d,default:()=>h,frontMatter:()=>r,metadata:()=>t,toc:()=>c});var a=s(49214),i=s(36906);const r={},d="Tree Shake",t={id:"advanced/tree-shake",title:"Tree Shake",description:"Farm supports Tree Shake, which is automatically enabled in the default Production environment. It can be turned on or off by the compilation.treeShaking option.",source:"@site/docs/advanced/tree-shake.md",sourceDirName:"advanced",slug:"/advanced/tree-shake",permalink:"/docs/advanced/tree-shake",draft:!1,unlisted:!1,editUrl:"https://github.com/farm-fe/farm-fe.github.io/tree/main/docs/advanced/tree-shake.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Partial Bundling",permalink:"/docs/advanced/partial-bundling"},next:{title:"Minification",permalink:"/docs/advanced/minification"}},l={},c=[{value:"Configuring Tree Shake",id:"configuring-tree-shake",level:2},{value:"Deal With Side Effects",id:"deal-with-side-effects",level:2}];function o(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"tree-shake",children:"Tree Shake"})}),"\n",(0,a.jsxs)(n.p,{children:["Farm supports Tree Shake, which is automatically enabled in the default Production environment. It can be turned on or off by the ",(0,a.jsx)(n.a,{href:"/docs/config/compilation-options#treeshaking",children:(0,a.jsx)(n.code,{children:"compilation.treeShaking"})})," option."]}),"\n",(0,a.jsxs)(n.p,{children:["During Tree Shake, the ",(0,a.jsx)(n.code,{children:"sideEffects"})," field in package.json will be automatically read, and modules with ",(0,a.jsx)(n.code,{children:"sideEffects"})," will not perform Tree Shake."]}),"\n",(0,a.jsx)(n.admonition,{type:"note",children:(0,a.jsx)(n.p,{children:"Farm will treat all circularly dependent modules as sideEffects and will not perform Tree Shake. Please try to avoid circular dependencies in your project."})}),"\n",(0,a.jsx)(n.p,{children:"Tree shake example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="a.js"',children:"import { b1, b2 } from 'b';\nconsole.log(b1);\n"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="b.js"',children:'export b1 = "B1";\nexport b2 = "B2";\n'})}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"a.js"})," is entry and it imports ",(0,a.jsx)(n.code,{children:"b.js"}),", after tree shaking, the result is:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="a.js"',children:"import { b1 } from 'b';\nconsole.log(b1);\n"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="b.js"',children:'export b1 = "B1";\n'})}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"b2"})," is not used and will be removed in both ",(0,a.jsx)(n.code,{children:"a.js"})," and ",(0,a.jsx)(n.code,{children:"b.js"})]}),"\n",(0,a.jsx)(n.h2,{id:"configuring-tree-shake",children:"Configuring Tree Shake"}),"\n",(0,a.jsxs)(n.p,{children:["Tree Shake is enabled in production mode by default, to disable tree shake, use ",(0,a.jsx)(n.code,{children:"compilation.treeShake"}),":"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-ts",metastring:'title="farm.config.ts"',children:"export default {\n   compilation: {\n     treeShake: false,\n   },\n};\n"})}),"\n",(0,a.jsx)(n.h2,{id:"deal-with-side-effects",children:"Deal With Side Effects"}),"\n",(0,a.jsxs)(n.p,{children:["When a module contains ",(0,a.jsx)(n.code,{children:"side effects"}),", Farm won't apply tree shake for it, and all of its imported and exports are treated as used. Farm will think following modules have ",(0,a.jsx)(n.code,{children:"side effects"}),":"]}),"\n",(0,a.jsxs)(n.ol,{children:["\n",(0,a.jsx)(n.li,{children:"CommonJs modules always have side effects."}),"\n",(0,a.jsxs)(n.li,{children:["A module contains ",(0,a.jsx)(n.code,{children:"self-executed"})," statement at global scope has side effects"]}),"\n",(0,a.jsx)(n.li,{children:"Modules that contains cyclic dependencies has side effects"}),"\n",(0,a.jsxs)(n.li,{children:["Modules matches ",(0,a.jsx)(n.code,{children:"sideEffects"})," config in its closest ",(0,a.jsx)(n.code,{children:"package.json"})]}),"\n",(0,a.jsx)(n.li,{children:"Entry modules are always has side effects."}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"Example 1:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"const a = require('./')\nmodule.exports = a;\n"})}),"\n",(0,a.jsx)(n.p,{children:"CommonJs module are always has side effects."}),"\n",(0,a.jsx)(n.p,{children:"Example 2:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import a from './';\n\na();\n"})}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"a()"})," is executed at global scope and we treat it as side effect."]}),"\n",(0,a.jsx)(n.p,{children:"Example 3:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"// a.js\nimport b from './b.js'\n\n// b.js\nimport a from './a.js'\n"})}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"a"}),", ",(0,a.jsx)(n.code,{children:"b"})," are cyclic dependencies, so they will be treated as side effects too."]}),"\n",(0,a.jsx)(n.p,{children:"Example 4:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-json",metastring:'title="package.json"',children:'{\n  "name": "my-package",\n  "sideEffects": [\n    "./global/**.ts"\n  ]\n}\n'})}),"\n",(0,a.jsxs)(n.p,{children:["all ts  modules under ",(0,a.jsx)(n.code,{children:"global/"})," are treat as side effects."]})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(o,{...e})}):o(e)}}}]);