feat: minify extracted css #3857
Conversation
fe2a0ea
to
cbfe079
Compare
lib/builder/webpack/client.js
Outdated
| @@ -147,6 +148,15 @@ export default class WebpackClientConfig extends WebpackBaseConfig { | |||
| ) | |||
| } | |||
|
|
|||
| if (!this.options.dev && this.options.build.extractCSS) { | |||
| config.plugins.push( | |||
There was a problem hiding this comment.
This can use another plugin which is suggested by sorka and be put into optimization.minifier https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/README.md#minimizing-for-production
There was a problem hiding this comment.
Will look into it this afternoon
There was a problem hiding this comment.
Agree with @clarkdo too. NMFR/optimize-css-assets-webpack-plugin would be a better idea.
Also, we are already using cssnano (via postcss) for production build:
There was a problem hiding this comment.
There was a problem hiding this comment.
@manniL Should be this.options.build.extractCSS ?
And also maybe we can add extractCSS.minifier: true for enabling it or do you have any idea ? Because if we add the plugins here, user can't change the behavior even they use extend
There was a problem hiding this comment.
Dang, right! 🙈
It goes well now, thx.
People could still override the whole minimizer, couldn't they?
If not, I'd agree with the extra flag there
(The check is !this.options.dev && !config.optimization.minimizer, so if config.optimization.minimizer is defined before, it won't get overriden)
There was a problem hiding this comment.
Yep, you’re right, I’m ok with that and this plugin will be removed when webpack5 gets released with default css minifier, so could you add a TODO?
5a526ae
to
6755e60
Compare
Codecov Report
@@ Coverage Diff @@
## dev #3857 +/- ##
==========================================
+ Coverage 97.56% 97.57% +0.01%
==========================================
Files 18 18
Lines 1191 1196 +5
Branches 327 328 +1
==========================================
+ Hits 1162 1167 +5
Misses 28 28
Partials 1 1
Continue to review full report at Codecov.
|
6755e60
to
1935645
Compare
1935645
to
171d072
Compare
|
I just updated nuxt to v2 and now I've come across a css glitch that I'm presuming is traceable to the new minify feature. What started out as background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cstyle type='text/css'%3E .c1, .c2 %7B transform-origin: 100px 100px; animation: x 2s ease-out infinite; %7D .c2 %7B animation-delay:-1s; %7D @keyframes x %7B from %7B transform: scale%280%29; opacity:.5; %7D to %7B transform:scale%281.0%29; opacity:0; %7D %7D %3C/style%3E%3Ccircle class='c1' cx='100' cy='100' r='20' fill='black' /%3E%3Ccircle class='c2' cx='100' cy='100' r='20' fill='black' /%3E%3C/svg%3E") no-repeat center/coverwhich is an animated circle, became background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cstyle/%3E%3Ccircle cx='100' cy='100' r='20' style='transform-origin:100px 100px;animation:x 2s ease-out infinite'/%3E%3Ccircle cx='100' cy='100' r='20' style='animation-delay:-1s;transform-origin:100px 100px;animation:x 2s ease-out infinite'/%3E%3C/svg%3E") no-repeat 50%/coverwhich does not correctly apply the intend styling. How do I disable whatever conversion is being applied here? |
|
@milestonebooks Please refer to #4018 and https://nuxtjs.org/api/configuration-build/#optimizecss Setting |
I've done that, but the embedded styling is still being gutted. |
|
@milestonebooks |
|
@manniL I have the following settings in nuxt.config.js build: {
extractCSS: true,
optimizeCSS: false,
},but no success. I'm new to postcss. If that's the way to fix this, can you give me some pointers? |
|
Okay, this combination seems to do the trick: build: {
extractCSS: true,
optimizeCSS: false,
postcss: {
plugins: {
cssnano: {
preset: [
'default', {
svgo: false,
}]
},
}
}
},Ref: build.postcss; cssnano presets |
|
@milestonebooks Instead of inlining your SVGs you can also load them like components with https://github.com/Developmint/nuxt-svg-loader |
|
@manniL Thanks, that could come in handy, but I don't see that it works for using svgs as background images. |
|
@milestonebooks Well, that's true 🙈 |
|
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
When
extractCSSis enabled, it'll spit out the extracted CSS "as is", means unminified. Let's change this!Types of changes
Checklist: