Introduction

What does it do?

The extension importmap is providing a middleware which is executed when a request is sent to the TYPO3 frontend. It hooks into the frontend controller and outputs four type of html-tags within the head-tag. These tags contain an importmap. That map is basically a JSON object with keys and links which are used to import ES modules at the top of javascript files.

The advent of HTTP2 requests have made the cost to send multiple HTTP requests quite insignificant. Importmaps utilize this performance boost while keeping the complexity of managing JavaScript ES modules low.

Which html-tags are generated?

Four type of html-tags are generated: The importmap, modulepreload link-tags, a shim to extend browser support, the "bootstrap" import statement for the application.

../_images/example.png

An example of the EXT:pagedoctor_starter extension providing an importmap.

Features

Once installed this extension is automatically loaded on each frontend request. Simply specify a TypoScript configuration at the PAGE-object level. The needed html-tags are then generated.

A list of functions:

  • Easy TypoScript configuration

  • Support Bootstrapping through an starting import statement

  • Easily preload modules through link-tags

  • Override module names to keep visual order in TypoScript