Build For Production

By default, Farm has enabled support for the following features for production builds:

• Tree Shake: Crop and filter irrelevant modules and code
• Compression: Compress and mangle the output resources.
• Automatically inject Polyfill: Farm downgrades to modern browsers(ES7) by default, if you need legacy browsers support, configuring targetEnv
• 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.

Configuring Output Dir

Add build script in package.json:

package.json

Then execute npm run build, the built resources will be emitted to build dir:

Project Build Resource Structure

If you want to custom the path that the resources emitted to, you can use:

• output.filename
• output.assetsFilename

farm.config.ts

For above example, all js/css will be emitted to build/assets/(example: build/assets/index-ea54.abbe3e.js). All static assets like image will be emitted to build/static(example: build/static/background.png)

Preview Built Resources

After the resources built, you can preview them by npm run preview:

open http://localhost:1911/ to preview your project.

Browser Compatibility

By default, Farm build projects to Modern Browsers that natively support async/await:

• Chrome >= 62
• Firefox >= 63
• Safari >= 13.1
• Edge >= 79

You can use output.targetEnv to configuring your target browsers:

In above example, Farm will downgrade the syntax to es5 and inject polyfill automatically. Then we have to install core-js@3 to polyfill injection:

note

• You need to install core-js@3 manually if your target to legacy browsers.
• If you want to configure browsers targets more precisely, see Syntax Downgrade And Polyfill

Configure Tree Shake and Minify

Production optimization like treeShake and minify are disabled by default in development for performance reasons, and enabled by default in production. But if treeShake or minify are configured manually, the default value will be used regardless of development or production.

For details about tree shake and minify, see:

• Tree Shake
• Minification

Configure Partial Bundling

note

Refer to Partial Bundling for details.

Farm enabled best practice of bundling already, make sure you really need to configure bundles manually. See Partial Bundling for details.