Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d803b54

Browse files
docs: update example <script> loading strategy (#7663)
* docs: update example <script> loading strategy In the code examples, a <script> tag is placed just before the ending </body> tag. This causes the script's external resource to download and execute only after the HTML has been parsed up to that point. For organization and faster script evaluation, we can consolidate scripts in the <head> and enable their defer attribute, which will download the external resource in parallel with HTML parsing. Once the HTML is parsed, the deferred script will execute. * docs: provide tip instead of rewriting examples * docs: update wording, add link to additional info --------- Co-authored-by: Zowie Beha <113861530+1zzowiebeha@users.noreply.github.com>
1 parent fd94d2a commit d803b54

File tree

1 file changed

+3
-0
lines changed

1 file changed

+3
-0
lines changed

‎src/content/guides/getting-started.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ contributors:
2727
- d3lm
2828
- snitin315
2929
- Etheryen
30+
- zowiebeha
3031
---
3132

3233
Webpack is used to compile JavaScript modules. Once [installed](/guides/installation), you can interact with webpack either from its [CLI](/api/cli) or [API](/api/node). If you're still new to webpack, please read through the [core concepts](/concepts) and [this comparison](/comparison) to learn why you might use it over the other tools that are out in the community.
@@ -200,6 +201,8 @@ Now, since we'll be bundling our scripts, we have to update our `index.html` fil
200201
</html>
201202
```
202203

204+
T> A couple other script loading strategies exist. Deferred loading is one such alternative to the above, where instead scripts are consolidated into the `<head>` and are given the `defer` attribute. This strategy downloads the external script resource(s) in parallel with document parsing, and will execute the scripts in order of document appearance after parsing has finished. This is in contrast to the above, in which the parser pauses to download and then execute the external resource syncronously. To learn more about this process, MDN has a nice [`reference guide`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script#async_and_defer).
205+
203206
In this setup, `index.js` explicitly requires `lodash` to be present, and binds it as `_` (no global scope pollution). By stating what dependencies a module needs, webpack can use this information to build a dependency graph. It then uses the graph to generate an optimized bundle where scripts will be executed in the correct order.
204207

205208
With that said, let's run `npx webpack`, which will take our script at `src/index.js` as the [entry point](/concepts/entry-points), and will generate `dist/main.js` as the [output](/concepts/output). The `npx` command, which ships with Node 8.2/npm 5.2.0 or higher, runs the webpack binary (`./node_modules/.bin/webpack`) of the webpack package we installed in the beginning:

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /