FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

wrap scripts into dom loaded event listener if defer is specified by Kingwl · Pull Request #10753 · react/create-react-app · GitHub

/ create-react-app Public

wrap scripts into dom loaded event listener if defer is specified - #10753

Open
Kingwl wants to merge 3 commits into
react:mainfrom
Kingwl:InlineChunkHtmlPlugin_defer
ConversationCommits (3)ChecksFiles changed
Open

wrap scripts into dom loaded event listener if defer is specified#10753
Kingwl wants to merge 3 commits into
react:mainfrom
Kingwl:InlineChunkHtmlPlugin_defer

Conversation

Kingwl commented Mar 26, 2021 •
edited
Loading

Copy link
Copy Markdown

Fixes #10752

This PR add a branch to detect what if defer attribute has been specified on script tag or not.
And if so, All script will be wrapped into a DOMContentLoaded event listener.

Here's an example for the changes:

We have a script:

alert(document.body.innerText);

And a html tmeplate:

<html>
    <body>
        <div>foo</div>
    </body>
</html>

And a webpack config:

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
          inject: true,
          template: 'index.html'
        }),
        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/])
    ]
}

Before changes:

<html>
<head>
    <script>alert(document.body.innerText);</script>
</head>
<body>
    <div>foo</div>
</body>
</html>

And It will caused an exception:

Uncaught TypeError: Cannot read property 'innerText' of null

** before changes with blocking **

<html>
<body>
    <div>foo</div>
    <script>alert(document.body.innerText);</script>
</body>
</html>

That works fine.

After changes (whatever blocking or not):

<html>
<body>
    <div>foo</div>
    <script>alert(document.body.innerText);</script>
</body>
</html>

And everything works fine.

Kingwl changed the title wrap into dom loaded event listener if defer is specified wrap scripts into dom loaded event listener if defer is specified Mar 26, 2021
Kingwl closed this Mar 26, 2021

Kingwl commented Mar 26, 2021

Copy link
Copy Markdown
Author

Oh I just realized It will break If there's listener for DOMContentLoaded in the script.

Kingwl reopened this Mar 26, 2021

Kingwl commented Mar 31, 2021

Copy link
Copy Markdown
Author

I'm not sure what happend.

stale Bot commented Jan 9, 2022

Copy link
Copy Markdown

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

stale Bot added the stale label Jan 9, 2022

Kingwl commented Jan 9, 2022

Copy link
Copy Markdown
Author

emmmmm, ping

stale Bot removed the stale label Jan 9, 2022
pickworth mentioned this pull request Jun 22, 2022
Open
avdkishore mentioned this pull request Nov 27, 2023
Open
marcusrc mentioned this pull request Nov 27, 2023
Open
dineshvgp mentioned this pull request Nov 27, 2023
Open
saurabharch mentioned this pull request Nov 27, 2023
Open
This was referenced Nov 28, 2023
Open
Open
Open
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

ianschmitz Awaiting requested review from ianschmitz
iansu Awaiting requested review from iansu
mrmckeb Awaiting requested review from mrmckeb
petetnt Awaiting requested review from petetnt

Assignees

No one assigned

Labels

CLA Signed

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

InlineChunkHtmlPlugin should respect defer attribute.

2 participants

Back | FazBrowse Home | New Git URL