scriptLoading

Type: 'defer' | 'blocking' | 'module'
Default: 'defer'

Used to set how <script> tags are loaded.

defer

By default, the <script> tag generated by Rsbuild will automatically set the defer attribute to avoid blocking the parsing and rendering of the page.

<head>
  <script defer src="/static/js/main.js"></script>
</head>
<body></body>

TIP

When the browser encounters a <script> tag with the defer attribute, it will download the script file asynchronously without blocking the parsing and rendering of the page. After the page is parsed and rendered, the browser executes the <script> tags in the order they appear in the document.

blocking

Setting scriptLoading to blocking will remove the defer attribute, and the script is executed synchronously, which means it will block the browser's parsing and rendering process until the script file is downloaded and executed.

export default {
  html: {
    inject: 'body',
    scriptLoading: 'blocking',
  },
};

When you need to set blocking, it is recommended to set html.inject to 'body' to avoid page rendering being blocked.

<head></head>
<body>
  <script src="/static/js/main.js"></script>
</body>

module

When scriptLoading is set to module, the script can support ESModule syntax, and the browser will automatically delay the execution of these scripts by default, which is similar to defer.

export default {
  html: {
    scriptLoading: 'module',
  },
};

<head>
  <script type="module" src="/static/js/main.js"></script>
</head>
<body></body>

ON THIS PAGE

scriptLoading#

defer#

blocking#

module#

scriptLoading

defer

blocking

module