Performance Crime

Decreasing @sitecore-jss/sitecore-jss npm package size in 4 times

1

Anton Tishchenko

6 times Sitecore MVP since 2019
2023 Sitecore Hackathon winner
10+ years of Sitecore development
ex-Sitecore employee
Dianoga webp author
CTO of EXDST

2

7+ years of Sitecore development
Dozens of Sitecore projects
from XSLT/WebForms thought MVC to Headless (Vue, Angular, React, Next.js)
1 Sitecore MVP

3

Bundlers

4

Next.js is a "hybrid" framework

Bundlers

5

Next.js Bundle Analyzer

Terminal command to install the analyzer:

npm i @next/bundle-analyzer

bundleAnalyzer.js:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: true,
})

module.exports = withBundleAnalyzer;

6

Sitecore Styleguide Next.js Client Bundle

all

7

Sitecore Styleguide Next.js Client Bundle

chunk

8

Sitecore Styleguide Next.js Client Bundle

@sitecore-jss

9

Bundlephobia

@sitecore-jss/sitecore-jss package

10

Excluding Packages from Client Bundle in Next.js

Split your code into server and client side parts
Hacks
- "Monkey-patching" of content inside node_modules using some additional npm tasks
- Hardcode node_modules folder content by adding it to Git
Webpack "alias" configuration

11

Webpack Alias Configuration

webpack: (config, { isServer, webpack }) => {
  if (!isServer) { // <-- We check that webpack prepares the client side bundle
    config.resolve.alias = {
      ...config.resolve.alias,
       //We replace the original 'graphql-request' package with empty file
      'graphql-request': path.resolve(__dirname, 'src/fake/graphql-request.js'),
      'graphql': path.resolve(__dirname, 'src/fake/graphql.js'), // <-- Same for graphql
      'axios': path.resolve(__dirname, 'src/fake/axios.js'), // <-- Same for axios
    };
  }
  return config;
}

12

Measure the Potential Savings

	sitecore-jss	graphql	axios	graphql-request	bundle size	decrease in X times
Stat size	287.2 KB	113.11 KB	48.95 KB	42.66 KB	82.48 KB	3.48
Parsed size	106.31 KB	39.44 KB	17.49 KB	17.35 KB	32.03 KB	3.32
Gzipped size	28.13 KB	10.05 KB	6.32 KB	4.84 KB	6.92 KB	4.07

13

Lighthouse Results

	Before	After

Total Size	130.5 KB	108.9 KB
Chunk Size	75.7 KB	54.9 KB

14

What Next?

You can apply this fix to your project if you don’t run any GraphQL queries on the client side
Sitecore is aware of this issue and is working on the optimization
You definetely need to analyze your client side bundle and exclude unnecessary packages from it

15

Resources

16

17