Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option to not inject .css in index.html during build #51

Open
anderskiaer opened this issue Nov 28, 2023 · 1 comment
Open

Option to not inject .css in index.html during build #51

anderskiaer opened this issue Nov 28, 2023 · 1 comment

Comments

@anderskiaer
Copy link

anderskiaer commented Nov 28, 2023

Thanks for a great vite plugin. 👏

When using cesium.js in a lazy loaded JavaScript bundle, cesium({ rebuildCesium: true }) works well since

if (isBuild && !rebuildCesium) {
tags.push({
tag: 'script',
attrs: {
src: normalizePath(path.join(CESIUM_BASE_URL, 'Cesium.js')),
}
});
}
ensures the <script...> tag is not included in the index.html, and therefore also cesium.js (which is quite large in size) is not loaded when visiting the main entrypoint of the application.

I think it would be beneficial to also have the plugin option to not inject the stylesheet link, i.e.

transformIndexHtml() {
const tags: HtmlTagDescriptor[] = [
{
tag: 'link',
attrs: {
rel: 'stylesheet',
href: normalizePath(path.join(CESIUM_BASE_URL, 'Widgets/widgets.css')),
}
}

Use case arguments:

  1. When lazy loading cesium.js, it would be nice to also lazy load the associated cesium CSS file, which is quite large (30 kB) and unhashed (i.e. can't be cached safely). For projects who want to lazy load the .css this is easily accomplished by importing the css as well
    import "cesium/Build/Cesium/Widgets/widgets.css";
    in the source code where import * as Cesium from "cesium"; is already imported (maybe adding this assoicated css import can even be done automatically by the vite plugin when rebuildCesium: true, before vite/rollup do their bundling?). The required cesium .css then goes through all the vite machinery for minimizing/lazy-chunking it...
  2. ...which then also puts it into a hashed file, which ensures the cesium css can also be strongly cached, instead of having to load it every time (without hash you would have problems when updating cesium later).

Current "workaround" is to remove the injected <link rel="stylesheet" href="/cesium/Widgets/widgets.css"> line in the generated index.html, and instead ensure the .css is added to the vite generated .css bundle by adding import "cesium/Build/Cesium/Widgets/widgets.css";

@nshen
Copy link
Owner

nshen commented Dec 2, 2023

Hi @anderskiaer thanks, I didn't follow cesium for some time, would you mind create a PR?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants