Create ScandiPWA App
ScandiPWA DocsCreate Magento AppGitHub
  • Create ScandiPWA App
  • Getting Started
    • Getting Started
    • Folder structure
    • Supported Browsers & Features
    • Updating to New Releases
  • Themes
    • Themes
    • File overrides
  • Extensions
    • Extensions
    • Installation
    • Application plugins
      • Plugin Templates
    • Build configuration plugins
    • Plugins for HTML and PHP
    • File provision
    • Module preference
  • Building your app
    • Proxying requests to server
    • Internationalization
    • Creating production build
  • Deploying your app
    • Storefront
    • Magento theme
Powered by GitBook
On this page
  • JavaScript chunks
  • CSS chunks

Was this helpful?

  1. Building your app

Creating production build

To create a production build of your theme, you must run the build command:

npm run build

This 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.

Heads Up!

When compiled as Magento 2 theme, the production build directory is changed to magento/Magento_Theme.

JavaScript chunks

When running a production build of freshly created Create React App application, there are a number of .js files (called chunks) that are generated and placed in the build/static/js directory:

main.[hash].chunk.js

  • This is your application code. index.js, etc.

[name].[hash].chunk.js

  • These files are code-splitting chunks. The code inside them includes modules that you've imported using the dynamic import() or following React.lazy approach.

[number].[hash].chunk.js

  • These files are vendor chunks. The code inside them includes modules that you've imported from within node_modules. Since vendor code tends to change less often than the actual application code, the browser will be able to cache them separately, and won't re-download them each time the app code changes.

runtime-main.[hash].js

  • This is a small chunk of webpack runtime logic which is used to load and run your application. The contents of this will be embedded in your build/index.html file by default to save an additional network request.

CSS chunks

Similarly with JavaScript in production, there are a number of .css files (called chunks) that are generated and placed in the build/static/css directory:

[name].[hash].chunk.css

  • These files are code-splitting chunks. The code inside them includes CSS modules that you've imported in JavaScript modules imported using the dynamic import() or following React.lazy approach.

[number].[hash].chunk.css

  • These files are vendor chunks. The code inside them includes CSS modules that you've imported from within node_modules.

main.[hash].chunk.css

  • This are styles imported in your application. index.js, etc.

PreviousInternationalizationNextStorefront

Last updated 4 years ago

Was this helpful?