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?
Related
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?
I'm using Vue 3 along with Tailwind and in my template I display a list of background images, so I'm looping through an array of images and this div is responsible for showing them:
<div :class="`h-full bg-[url('#/assets/img/${article.preview_image}')] bg-center bg-no-repeat bg-cover hover:scale-105 transition duration-[2000ms] ease-in-out`" />
This way it doesn't work although I have no errors in the console and when I check the DOM it's rendered alright, the images just don't show up
The weird part is that when I hard code the name of the image like bg-[url('#/assets/img/my_image.jpg')] it works, and when I go back to using my loop variable it still works although it was not working at first, and it's not cache related because I disabled it
And then when I restart the server the images are gone again
Any idea what's causing this?
By the way, the data comes from a data.json file, if it matters. Like:
[
{ preview_image: 'xxx.jpg'},
{ preview_image: 'xxx.jpg'}
{ preview_image: 'xxx.jpg'}
]
I tried to use a .ts file instead but the problem remains
This may be a webpack issue where your image files are not bundled correctly. I se you have tried a .ts file. Can you try again but use require("filePath"), with the image files. This ensures that the files are bundled.
Cheers :)
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.
Hi i downloaded bootstrap from their website. it is a zip file with the different css js img files. do we need to paste in both bootstrap.css and bootstrap.min.css? isnt it the same file and i'm including them twice?
No you do not need to keep both the files since .min file is only a minified(compressed) version of bootstrap.css.In order to utilize all of bootstrap features you just need to include 2 files one css(either min or normal) and one js(either min or normal).You might also consider downloading it of cdn instead of keep a copy locally here is the link http://www.bootstrapcdn.com/
I'm trying to load an entire source library of JS/CSS from Objective C (Xcode) from a UIWebView with an HTML loaded. The problem is that in the library documentation, they say you just need to load one JS file, but inside it's requiring others JS. The question is how i have to arrange the files... Just one folder with all the sources? Nested folders containing the JS/CSS just as they come on the library? or Do I need to fix the path of the requires in order to load them (say absolute or relative)?
Thanks in advance
I suggest minifying all of your JS (CSS) into 1 file. You can download tools to do this, but one easy free one online is: http://jscompress.com/
Using some command or a downloaded app would probably make the code-minify-debug process much quicker, but you can test out the idea using that online tool.