How to lazy load global style? #39

vralle · 2023-10-19T18:40:35Z

vralle
Oct 19, 2023

Hi there!

I want load some styles lazy.

The idea was like this:

function injectCss() {
  const style = document.createElement('link');
  style.rel = 'stylesheet';
  style.href = 'node_modules/package/style.scss';
  document.head.appendChild(style);
}
injectCss();

This way doesn't work)

I opened a discussion because I'm not sure if I'm doing the right thing. I'm guessing there may be another way to lazy load styles via JS.

webdiscus · 2023-10-19T19:00:56Z

webdiscus
Oct 19, 2023
Maintainer

@vralle

I'll implement this feature in one of the next releases, see my next comment how it will be realized.

2 replies

webdiscus Oct 19, 2023
Maintainer

@vralle ,

I found the way! It will be works :-)
I need to implement it later, in my sandbox your lazy load of SCSS works.

Task

inject imported CSS in JS
allow lazy load CSS in JS

The idea

We need define two rules in Webpack.

module: {
    rules: [
      {
        test: /\.s?css/,
        oneOf: [
          // lazy load CSS in JavaScrip
          {
            resourceQuery: /lazy/, // <= use the `lazy` query for style file what should de lazy loaded
            type: 'asset/resource',
            use: ['css-loader', 'sass-loader'],
          },
          // normal using CSS, defined in HTML or imported in JS
          {
            use: ['css-loader', 'sass-loader'],
          },
        ],
      },
    ],
  },

The HTML:

<!DOCTYPE html>
<html>
<head>
  <script src="main.js" defer></script>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

main.js

import 'normal-style.scss'; // <= the extracted CSS fill be injected in head automatically
import cssFile from './lazy-style.scss?lazy'; // <= use the `lazy` query

function injectCss() {
  const style = document.createElement('link');
  style.rel = 'stylesheet';
  style.href = cssFile;
  document.head.appendChild(style);

  console.log('cssFile: ', { cssFile }); // => output CSS filename
}

injectCss();

This way it will be possible to lazily load the style into JS.
This example code already works by me local. I'll implement this in one of the next releases.

I will never use this feature, but this feature may be useful to someone.

webdiscus Oct 20, 2023
Maintainer

@vralle it was a local quick draft implementation

I have implemented a new local version w/o need to change Webpack style loader. See please below.

vralle · 2023-10-19T20:02:04Z

vralle
Oct 19, 2023
Author

Sorry, but personally I think that the lazy loading CSS is a bad idea.

Example, a page uses a lightbox. Lightbox styles can be loaded lazily or on demand from js. In this case, lazy loading of the style has some pros:
The lightbox style may not be needed if the lightbox is not activated. This way you can save on one request to the server, time to build CSSOM and time of render blocking.

There's another side to this where caching or PWA could change metrics, but we don't have a starting point now.

2 replies

webdiscus Oct 19, 2023
Maintainer

Ok, I accept this use case :-)

vralle Oct 19, 2023
Author

I may not be sure about how I'm doing. But I always know why I do it)

vralle · 2023-10-19T20:06:52Z

vralle
Oct 19, 2023
Author

I will never use something like this, therefore my shortly answer: no support for lazy load of CSS, because it is not a task of the Plugin.

style-loader has insert property

0 replies

vralle · 2023-10-20T19:51:51Z

vralle
Oct 20, 2023
Author

1 reply

webdiscus Oct 20, 2023
Maintainer

@vralle
please, for a new theme create a new issue / discussion.
For this question is created the Writing own adapter for responsive-loader

webdiscus · 2023-10-20T21:18:53Z

webdiscus
Oct 20, 2023
Maintainer

back to main task...

I have implemented the possibility to get output CSS filename in JS via import cssFile from 'style.scss'.

No changes is required in the Webpack loader rule, you can use the standard style rule:

module: {
    rules: [
      {
        test: /\.s?css$/,
        use: ['css-loader', 'sass-loader'],
    ],
  },

To get output CSS filename in JS for lazy load, just add the ?lazy to the source filename:

import 'normal-style.scss'; // <= extract CSS into file, w/o `lazy` query
import cssFile from './lazy-style.scss?lazy'; // <= extract CSS into file and get output CSS filename using the `lazy` query

function injectCss() {
  const style = document.createElement('link');
  style.rel = 'stylesheet';
  style.href = cssFile;
  document.head.appendChild(style);

  console.log('cssFile: ', { cssFile }); // => output CSS filename
}

injectCss();

What can you say about that? Is it right for you?
This is already implemented, I test it local by me and can publish an alpha version for you.

I have an idea to extend the feature.

When used a style file with the lazy query, then save all such lazy filenames in a buffer and inject the JS runtime code into head tag (at end of tag) to dynamically load lazy CSS files.

Do you have any suggestions? Possible add new plugin.css.lazy.runtime option:

new HtmlBundlerPlugin({
  entry: {
      index: 'src/views/home.html',
    },
    css: {
      filename: '[name].[contenthash:8].css',
      lazy: {
        enable: true, // or false
        runtime: true, // if true, then add JS runtime code in head to load CSS
      }
    }
  }),

It is just draft experimental sketch...

0 replies

webdiscus · 2023-10-21T00:16:30Z

webdiscus
Oct 21, 2023
Maintainer

@vralle

can you please check the experimental beta version v2.16.0-beta.0 with support of the CSS lazy load?

Easy to use:

// your code to add the CSS file dynamically
function lazyLoad(outputFilename) {
    const style = document.createElement('link');
    style.rel = 'stylesheet';
    style.href = outputFilename;
    document.head.appendChild(style);
}

lazyLoad(require('./style-dynamic.scss?lazy')); // <= lazy load the source style file with `lazy` query

Or you can use the import:

import cssFile from './lazy-style.scss?lazy';

// your code to add the CSS file dynamically
function lazyLoad(outputFilename) {
    const style = document.createElement('link');
    style.rel = 'stylesheet';
    style.href = outputFilename;
    document.head.appendChild(style);
}

lazyLoad(cssFile); // <= lazy load CSS output filename

What do you think, maybe use another query, e.g. name, filename?
Would be better to reserve the ?lazy for really lazy load feature with auto injecting the lazyLoad() runtime function in HTML?

If it's ok, then I'll make a release out of it.

1 reply

webdiscus Oct 21, 2023
Maintainer

So, similar to the example from the image-minimizer-webpack-plugin, it is more logical to use a query with the url name.

The example from image-minimizer-webpack-plugin:

const myImageUrl = new URL("image.png", import.meta.url);

Then we can use:

import cssUrl from './lazy-style.scss?url'; // <= `lazy` will be renamed to `url`

In the next beta version the lazy query will be renamed to url, because the lazy will be reserved for advanced feature.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to lazy load global style? #39

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 6 comments 6 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to lazy load global style? #39

vralle Oct 19, 2023

Replies: 6 comments · 6 replies

webdiscus Oct 19, 2023 Maintainer

webdiscus Oct 19, 2023 Maintainer

Task

The idea

webdiscus Oct 20, 2023 Maintainer

vralle Oct 19, 2023 Author

webdiscus Oct 19, 2023 Maintainer

vralle Oct 19, 2023 Author

vralle Oct 19, 2023 Author

vralle Oct 20, 2023 Author

webdiscus Oct 20, 2023 Maintainer

webdiscus Oct 20, 2023 Maintainer

I have an idea to extend the feature.

webdiscus Oct 21, 2023 Maintainer

webdiscus Oct 21, 2023 Maintainer

vralle
Oct 19, 2023

Replies: 6 comments 6 replies

webdiscus
Oct 19, 2023
Maintainer

webdiscus Oct 19, 2023
Maintainer

webdiscus Oct 20, 2023
Maintainer

vralle
Oct 19, 2023
Author

webdiscus Oct 19, 2023
Maintainer

vralle Oct 19, 2023
Author

vralle
Oct 19, 2023
Author

vralle
Oct 20, 2023
Author

webdiscus Oct 20, 2023
Maintainer

webdiscus
Oct 20, 2023
Maintainer

webdiscus
Oct 21, 2023
Maintainer

webdiscus Oct 21, 2023
Maintainer