feat: use css2json loader by default

NativeScript / nativescript-dev-webpack

A package to help with webpacking NativeScript apps.

Apache License 2.0

97 stars 49 forks source link

feat: use css2json loader by default #1076

Closed vakrilov closed 4 years ago

vakrilov commented 4 years ago

PR Checklist

[x] The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#commit-messages.
[ ] There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it.
[x] You have signed the [CLA].
[x] All existing tests are passing: https://github.com/NativeScript/nativescript-dev-webpack/blob/master/CONTRIBUTING.md#testing-locally-by-running-e2e-tests
[x] Tests for the changes are included.

What is the current behavior?

Css files are loaded with css-loader

What is the new behavior?

Use the css2json that does parsing the CSS files and puts parsed CSS AST (as json) in the bundle.

rosen-vladimirov commented 4 years ago

Merging with red tests - the failure is not caused by this PR - its just flaky test.

farfromrefug commented 4 years ago

@vakrilov can you explain a little bit why it is better? Is it faster to load? Did you compare the size?

vakrilov commented 4 years ago

The size of the bundle is bigger. Don't have the exact measurements - but parsed JSON is bigger than it's CSS equivalent. Run-time performance is much better though - on slower devices we have observed performance increase from 1.2s to 50ms (this is theme parsing only).

The new @nativescript/theme has much more CSS and this is what made this optimization more necessary.

farfromrefug commented 4 years ago

@vakrilov ok got it. Dont use @nativescript/theme myself (too big). I will try and run some tests on this. Why did you disable it for non app.css on vue? Wondering if it could be good to put all in app.css then. What about imported from app.css, are they included in the json file?

THanks again for your answer, and your amazing work !

vakrilov commented 4 years ago

Vue and Angular have their own way of handling component-level CSS. They process the CSS additionally to add component scope (usually implemented by adding attribute selectors). Passing pre-compiled CSS to JSON will not work in that case.

In any case - the component level CSSis usually not that big and run-time parsing is good enough in that case. You will have perf problems if you import the whole theme in a component, but that is not recommended.