How to defer loading css when using import

Question

import 'react-dates/lib/css/_datepicker.css'

The css above is not critical, so I can defer loading it.

How to defer loading css when using import?

google gives me how to do it using <link>

i am not sure but let see if this is helpful. medium.com/webpack/… — Sumit Patel
– Sumit Patel, Commented Mar 16, 2020 at 7:18
Its important to know where is this import, if its on root components, or on some component that can be imported dynamically itself — Mechanic
– Mechanic, Commented Mar 16, 2020 at 9:02
is there others CSS you import along side this CSS, or it the only CSS in this component — Mechanic
– Mechanic, Commented Mar 16, 2020 at 9:03
This is in some component which is not always rendered (I guess that satisfied can be dynamically imported) @CaptainMhmdrz_A , there are other '*.js' files I import — eugene
– eugene, Commented Mar 16, 2020 at 10:24

Zmen Hu · Accepted Answer · 2020-03-16 07:27:40Z

1

If you are using webpack, you can use its dynamic import feature:

const delay = () => import(`react-dates/lib/css/_datepicker.css`)
setTimeout(() => delay(), 0)

answered Mar 16, 2020 at 7:27

Zmen Hu

8054 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Overclocked Skid Over a year ago

I just don't understand why Webpack loaders can't detect dynamic imports and automatically add a style tag with the defer attribute, but that setTimeout hack does it! Thanks

Collectives™ on Stack Overflow

How to defer loading css when using import

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related