feat(webpack/client): minify extracted css assets (#3857)

lib/builder/webpack/client.js

@@ -4,6 +4,7 @@ import webpack from 'webpack'
 import HTMLPlugin from 'html-webpack-plugin'
 import BundleAnalyzer from 'webpack-bundle-analyzer'
 import UglifyJsWebpackPlugin from 'uglifyjs-webpack-plugin'
+import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin'
 import FriendlyErrorsWebpackPlugin from '@nuxtjs/friendly-errors-webpack-plugin'
 
 import VueSSRClientPlugin from './plugins/vue/client'
@@ -97,25 +98,35 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
 
   customize() {
     const config = super.customize(...arguments)
-    // Make uglifyjs faster
+
     if (!this.options.dev && !config.optimization.minimizer) {
+      config.optimization.minimizer = []
+
       // https://github.com/webpack-contrib/uglifyjs-webpack-plugin
-      config.optimization.minimizer = [
-        new UglifyJsWebpackPlugin({
-          parallel: true,
-          cache: this.options.build.cache,
-          sourceMap: config.devtool && /source-?map/.test(config.devtool),
-          extractComments: {
-            filename: 'LICENSES'
-          },
-          uglifyOptions: {
-            output: {
-              comments: /^\**!|@preserve|@license|@cc_on/
-            }
+      const uglifyJsPlugin = new UglifyJsWebpackPlugin({
+        parallel: true,
+        cache: this.options.build.cache,
+        sourceMap: config.devtool && /source-?map/.test(config.devtool),
+        extractComments: {
+          filename: 'LICENSES'
+        },
+        uglifyOptions: {
+          output: {
+            comments: /^\**!|@preserve|@license|@cc_on/
           }
-        })
-      ]
+        }
+      })
+      config.optimization.minimizer.push(uglifyJsPlugin)
+
+      // https://github.com/NMFR/optimize-css-assets-webpack-plugin
+      // https://github.com/webpack-contrib/mini-css-extract-plugin#minimizing-for-production
+      // TODO: Remove OptimizeCSSAssetsPlugin when upgrading to webpack 5
+      if (this.options.build.extractCSS) {
+        const optimizeCSSPlugin = new OptimizeCSSAssetsPlugin({})
+        config.optimization.minimizer.push(optimizeCSSPlugin)
+      }
     }
+
     return config
   }
 

package.json

@@ -97,6 +97,7 @@
     "memory-fs": "^0.4.1",
     "mini-css-extract-plugin": "^0.4.2",
     "minimist": "^1.2.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "pify": "^4.0.0",
     "postcss": "^6.0.22",
     "postcss-import": "^11.1.0",

test/fixtures/extract-css/assets/global.css

@@ -3,8 +3,12 @@
 body {
   background-color: rgb(28, 28, 28);
   display: flex;
+
   justify-content: center;
+
   align-items: center;
+
+
   height: 100vh;
 }
 

test/unit/extract-css.test.js

@@ -0,0 +1,14 @@
+import { resolve } from 'path'
+import fs from 'fs'
+import { promisify } from 'util'
+
+const readFile = promisify(fs.readFile)
+
+describe('extract css', () => {
+  test('Verify global.css has been extracted and minified', async () => {
+    const pathToMinifiedGlobalCss = resolve(__dirname, '..', 'fixtures/extract-css/.nuxt/dist/client/90516105347f397aade6.css')
+    const content = await readFile(pathToMinifiedGlobalCss, 'utf-8')
+    const expectedContent = 'h1[data-v-180e2718]{color:red}.container[data-v-180e2718]{-ms-grid-columns:60px 60px 60px 60px 60px;-ms-grid-rows:30px 30px;display:-ms-grid;display:grid;grid-auto-flow:row;grid-template-columns:60px 60px 60px 60px 60px;grid-template-rows:30px 30px}'
+    expect(content).toBe(expectedContent)
+  })
+})