I'm on Webpack 5, compiling mostly Vue sfc sass styles, and currently I achieved to extract all the css styles to a single css bundle using mini-css-extract-plugin.
Obviously this bundle has grown in size and consequently the download stars taking s bit too much time, so I'm trying to split it in smaller chunks to parallelize the download.
Found this SO question, but the user managed to solve the problem using multiple entry points (which I want to avoid since the project is a spa (am I wrong?)) and this answer which suggest to configure mini-css-extract-plugin filename property to use a function instead of a string, but it seems not working since every chunk passed to the function seems having the same name/id, maybe due starting from a single entry point?
new MiniCssExtractPlugin({
// example
filename: (x) => {
console.log(x.chunk.name);
console.log("=====");
return "css/main.[contenthash].css";
}
}),
> webpack-demo#1.0.0 build
> webpack
main
=====
main
=====
main
=====
main
=====
...
How can I split the outputted css bundle to multiple files?
Related
I am using vue.js (2.6.5) and webpack (5.77.1), and I enabled the source map feature in development env, with simple config as below:
mode: 'development',
devtool: 'eval-cheap-module-source-map',
.....
Well, the source map feature indeed works, but what confuse me is when you search a file name, there will be multiple files with same file name listed, see as below:
Only one of them is the exact original file definition, other files are definitions of render function of vue.js and some others. Every time I need to click on each one of them to check which is the exact original file, this annoys me, does any one know how to only show the exact original file ?
Can't find any resources online, but i'm trying to optimize our in-house component library, which i'm trying to make more tree shaker friendly.
How with rollup can i leave .css files in the output along with maintain their import in the file.
I.E
Foo.js (inside import "./foo.css")
Foo.css
Output.
Foo.js (inside import "./foo.css" remains) created into module
Foo.css
This seems as straight forward as possible and iv'e found similar threads asking for this but zero responses. https://github.com/egoist/rollup-plugin-postcss/issues/204
Allowing this will basically mean when people who consume my project will only get critical css automatically.
I.E Import { Foo } from "xyz/foo" will automatically import the accompanying css file.
Unfortunately I couldn't find a solution with Rollup for what you're looking for. However, if you're open to using Webpack there's a plugin that would make this possible called MiniCssExtractPlugin. It creates CSS files per JS file and would achieve the structure you're wanting.
I've been playing around with a small app which is broken up as follows - listed in loading order:
a css file, which also imports bootstrap (size 124KB, 1.8s)
an "aurelia.js" file which contains all aurelia code (320KB, 1.8s)
a "myproject.js" file which contains my code (100KB, 0.9s)
a "dependencies.js" file which contains various dependencies (400KB, 1.2s)
The problem is that these files seem to load sequentially, taking around six seconds. How can I fix this?
I use webpack for JS and now I want to use it for styles. I have a lot of styles in different folders and i want to compile them all without requiring each of them mannaully. The question is how to gather all the .less files in the folders and compile them via less-loader?
This isn't how webpack is meant to work, really. If you really want to do this, grunt/gulp is going to be a better choice.
Webpack's require mechanism ensures you build only the CSS you need for any given entry point, and gives you dependency management as well. If you do want to use webpack, but don't want to use the style-loader to insert them into the DOM etc., you can use the Extract Text plugin to build your compiled CSS into a separate file.
I found some workaround using require.context.
First you need to create a js file in the root of the styles folder if you don't have one.
Use this code if you use css or less and always extract them
require.context('./', true, /(\.less$)|(\.css$)/);
First argument is relative path to folder in which webpack should search for the files, second tells that it should search in subfolders and the last one is regexp of the extension of the files that webpack should require. Then you need to requre this file or use it as entry point. This works if you use extract-text-webpack-plugin but doesn't work otherwise.
Using styles without extracting them to style separate file
The example above doesn't work if you don't extract them because webpack generate modules with styles but doesn't execute them. This is complete example that works in both cases:
(function (requireContext) {
return requireContext.keys().map(requireContext);
} (require.context('../', true, /(\.less$)|(\.css$)/)));
The tutorials got me going with the Dojo build system. However I'm left with a question that'll make or break the possibility of deploying a fully built release in my case. It is possible that the tutorial explains it, but that I didn't get it. Apologies if that was the case !
I use a library that lives inside an AMD layer ; let's call it blackboxLayer.js. There are several packages inside that layer, but I suppose the question would be the same if there was only one. So let's say that blackboxLayer.js contains a single package called blackbox, with modules blackbox/A and blackbox/B. To be sure that things are fun, that layer is bootable. And of course it's closed source stuff.
My app modules reference blackbox/A or blackbox/B. How do I make my build profile go look for the blackbox package inside that blackboxLayer.js file, rather than in a directory ?
Thanks for any input. :)
If built file blackboxLayer.js is in relative path /release/blackbox/layers, there is a separate dojo layer
<script type="text/javascript" src="path to dojoLayer.js"></script>
and
var dojoConfig = {
packages: [
{ name: 'blackbox', location: 'release/blackbox' }
]
};
then code inside this function can reference modules A and B,
require(['blackbox/layers/blackboxLayer'],
function () {
require(['dojo/parser', 'dojo/ready'],
function (parser, ready) {
ready(function () {
require(['blackbox/A', 'blackbox/B'],
function (blackboxA, blackboxB) {
// call blackboxA and blackboxB
});
});
});
});
If there is no separate dojo layer, you can reference blackboxLayer.js in the script tag, and omit the package def and requiring blackboxLayer.
The interim solution I've been using since this question has been posted is NOT to use dojo's builder... Instead I use a lightweight grunt pattern that concatenates AMD sources into a layer, and then I reference the layer from dojoConfig's deps property. The concatenation process is visible here : https://github.com/gruntjs-updater/grunt-amd-concat