Summary: The defer attribute means that the file in the tag containing the defer attribute is read only after the entire page has loaded

The webpack.config.js configuration file is as follows:

After running the NPX webpack directive locally, webpack calls the html-webpack-plugin to automatically generate the index.html file in the dist folder, and automatically introduce the packaged main.js file in the source code of index.html. The defer attribute is automatically assigned true when introduced.

<! DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script defer src="main.js"></script></head>
<body>
<div class="box1"></div>

</body>
</html>
Copy the code

Here’s an introduction to the defer attribute:

If you add the defer attribute at script writing time, the browser doesn't have to process the script immediately when it downloads, and instead continues to download and parse the page, which improves download performance. There are many different kinds of situations. For example, if you define a lot of javascript variables or write a lot of scripts that need to be processed in a reference file (.inc), adding the defer attribute to those scripts will definitely help improve performance.Copy the code

Such as:

<script language="javascript" defer>
var object = new Object(a); </script>Copy the code

Two final points to note:

1. Don't call document.write from the script section of defer, because document.write will produce direct output. Also, don't include any global variables or functions in the defer script section that will be used to execute the script immediately. Add defer, which is equivalent to window.onload but more flexible than window.onload! (essentially before window.load)Copy the code