Porsche Design System

Component Chunk Links

Table of Contents

Supported options
Examples

Function name: getComponentChunkLinks()

Porsche Design System components load dynamically from a CDN as soon as they are used for the first time. This results in a waterfall like loading behaviour where your application bootstraps first, then loads the Porsche Design System Core and when any component rendered the corresponding component chunk gets loaded afterwards. This can be optimized by fetching used chunks in parallel while the application is bootstrapping.

Therefore, we provide a ready to use partial in all @porsche-design-system/components-{js|angular|react|vue} packages which needs to be injected into the <head> of your index.html.

An in-depth optimization guide can be found at Vanilla Js Optimization.

Supported options#

Option

Description

Type

Default

components

All components listed in the array are loaded from the CDN. By default, our core is always preloaded when using this partial.

('accordion' | 'banner' | 'button-pure' | 'button-tile' | 'button' | 'canvas' | 'carousel' | 'checkbox' | 'crest' | 'display' | 'divider' | 'drilldown' | 'fieldset' | 'flag' | 'flyout' | 'heading' | 'icon' | 'inline-notification' | 'input-date' | 'input-email' | 'input-month' | 'input-number' | 'input-password' | 'input-search' | 'input-tel' | 'input-text' | 'input-time' | 'input-url' | 'input-week' | 'link-pure' | 'link-tile-product' | 'link-tile' | 'link' | 'modal' | 'model-signature' | 'multi-select' | 'optgroup' | 'pagination' | 'pin-code' | 'popover' | 'radio-group' | 'scroller' | 'segmented-control' | 'select' | 'sheet' | 'spinner' | 'stepper-horizontal' | 'switch' | 'table' | 'tabs-bar' | 'tabs' | 'tag-dismissible' | 'tag' | 'text-list' | 'text' | 'textarea' | 'toast' | 'wordmark')[]

[]

cdn

Decides from which CDN the resources are loaded.

'auto' | 'cn'

'auto'

format

Defines the output format of the partial. By default, it returns a html string, with jsx it returns valid jsx elements. When using the js option a javascript object is returned.

'html' | 'jsx' | 'js'

'html'

When using jsx in the format option, it is necessary to have react/jsx-runtime as a dependency in the project included.

Examples#

Project integration differs based on the project setup. The following showcases the most common ways.

Note: Make sure to preload only component chunks which are really needed initially!

<!-- index.html -->
<head>
  <!--PLACEHOLDER_COMPONENT_CHUNK_LINKS-->
</head>

<!-- package.json (tested on macOS, the script may need to be adjusted depending on the operating system used) -->
<!-- make sure to adjust the path to the index.html file -->
"scripts": {
  "prestart": "yarn replace",
  "replace": "placeholder='<!--PLACEHOLDER_COMPONENT_CHUNK_LINKS-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getComponentChunkLinks({ components: [\"button\", \"wordmark\"] }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
  <!-- Alternative: force using China CDN -->
  "replace": "placeholder='<!--PLACEHOLDER_COMPONENT_CHUNK_LINKS-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getComponentChunkLinks({ cdn: \"cn\" }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
}

Output

The result of this partial looks like this:

<link rel=preload href=https://cdn.ui.porsche.com/porsche-design-system/components/porsche-design-system.v4.0.0-rc.0.b93c29b7680ac7696e04.js as=script crossorigin>
<link rel=preload href=https://cdn.ui.porsche.com/porsche-design-system/components/porsche-design-system.button.41360413579e0161e09c.js as=script>
<link rel=preload href=https://cdn.ui.porsche.com/porsche-design-system/components/porsche-design-system.wordmark.321164a4c9a4b451e73a.js as=script>

// Alternative: force using China CDN
<link rel=preload href=https://cdn.ui.porsche.cn/porsche-design-system/components/porsche-design-system.v4.0.0-rc.0.b93c29b7680ac7696e04.js as=script crossorigin>