Replies: 6 comments 6 replies
-
|
I'll implement this feature in one of the next releases, see my next comment how it will be realized. |
Beta Was this translation helpful? Give feedback.
-
|
@vralle , I found the way! It will be works :-) Task
The ideaWe 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. I will never use this feature, but this feature may be useful to someone. |
Beta Was this translation helpful? Give feedback.
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
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: There's another side to this where caching or PWA could change metrics, but we don't have a starting point now. |
Beta Was this translation helpful? Give feedback.
-
|
Ok, I accept this use case :-) |
Beta Was this translation helpful? Give feedback.
-
|
I may not be sure about how I'm doing. But I always know why I do it) |
Beta Was this translation helpful? Give feedback.
-
style-loader has insert property |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
@vralle |
Beta Was this translation helpful? Give feedback.
-
|
back to main task... I have implemented the possibility to get output CSS filename in JS via
module: {
rules: [
{
test: /\.s?css$/,
use: ['css-loader', 'sass-loader'],
],
},
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? I have an idea to extend the feature.When used a style file with the Do you have any suggestions? Possible add new 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... |
Beta Was this translation helpful? Give feedback.
-
|
can you please check the experimental beta version 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` queryOr you can use the 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 filenameWhat do you think, maybe use another query, e.g. If it's ok, then I'll make a release out of it. |
Beta Was this translation helpful? Give feedback.
-
|
So, similar to the example from the image-minimizer-webpack-plugin, it is more logical to use a query with the 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 |
Beta Was this translation helpful? Give feedback.
-
Hi there!
I want load some styles lazy.
The idea was like this:
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.
Beta Was this translation helpful? Give feedback.
All reactions