feat(ui): modern build mode

Author: Guillaume Chau

packages/@vue/cli-service/lib/commands/build/index.js

@@ -48,7 +48,8 @@ module.exports = (api, options) => {
       process.env.VUE_CLI_MODERN_MODE = true
       delete process.env.VUE_CLI_MODERN_BUILD
       await build(Object.assign({}, args, {
-        modernBuild: false
+        modernBuild: false,
+        keepAlive: true
       }), api, options)
 
       process.env.VUE_CLI_MODERN_BUILD = true
@@ -158,7 +159,9 @@ async function build (args, api, options) {
     const DashboardPlugin = require('../../webpack/DashboardPlugin')
     modifyConfig(webpackConfig, config => {
       config.plugins.push(new DashboardPlugin({
-        type: 'build'
+        type: 'build',
+        modernBuild: args.modernBuild,
+        keepAlive: args.keepAlive
       }))
     })
   }

packages/@vue/cli-service/lib/webpack/DashboardPlugin.js

@@ -5,6 +5,7 @@
 'use strict'
 
 const path = require('path')
+const fs = require('fs-extra')
 const webpack = require('webpack')
 const { IpcMessenger } = require('@vue/cli-shared-utils')
 const { analyzeBundle } = require('./analyzeBundle')
@@ -32,12 +33,16 @@ function getTimeMessage (timer) {
 class DashboardPlugin {
   constructor (options) {
     this.type = options.type
+    if (this.type === 'build' && options.modernBuild) {
+      this.type = 'build-modern'
+    }
     this.watching = false
+    this.autoDisconnect = !options.keepAlive
   }
 
   cleanup () {
     this.sendData = null
-    ipc.disconnect()
+    if (this.autoDisconnect) ipc.disconnect()
   }
 
   apply (compiler) {
@@ -61,7 +66,7 @@ class DashboardPlugin {
     const progressPlugin = new webpack.ProgressPlugin((percent, msg) => {
       // Debouncing
       const time = Date.now()
-      if (time - progressTime > 100) {
+      if (time - progressTime > 300) {
         progressTime = time
         sendData([
           {
@@ -168,20 +173,27 @@ class DashboardPlugin {
         {
           type: 'operations',
           value: `idle${getTimeMessage(timer)}`
-        },
-        {
-          type: 'stats',
-          value: {
-            errors: hasErrors,
-            warnings: stats.hasWarnings(),
-            data: statsData
-          }
         }
       ])
 
-      if (!this.watching) {
-        this.cleanup()
-      }
+      const statsFile = path.resolve(process.cwd(), `.stats-${this.type}.json`)
+      fs.writeJson(statsFile, {
+        errors: hasErrors,
+        warnings: stats.hasWarnings(),
+        data: statsData
+      }).then(() => {
+        sendData([
+          {
+            type: 'stats'
+          }
+        ])
+
+        if (!this.watching) {
+          this.cleanup()
+        }
+      }).catch(error => {
+        console.error(error)
+      })
     })
   }
 }

packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue

@@ -4,6 +4,13 @@
       <VueIcon icon="donut_large"/>
       <div class="title">{{ $t('vue-webpack.analyzer.title') }}</div>
 
+      <VueSwitch
+        v-if="modernMode"
+        v-model="showModernBuild"
+      >
+        {{ $t('vue-webpack.modern-mode') }}
+      </VueSwitch>
+
       <template v-if="currentTree">
         <VueButton
           icon-left="arrow_upward"
@@ -22,6 +29,7 @@
           class="separator"
         />
       </template>
+
       <VueSelect
         v-model="selectedChunk"
         :disabled="Object.keys(modulesTrees).length === 0"
@@ -33,11 +41,13 @@
           :label="`${$t('vue-webpack.analyzer.chunk')} ${getChunkName(key)}`"
         />
       </VueSelect>
+
       <VueSelect v-model="sizeField">
         <VueSelectButton value="stats" :label="`${$t('vue-webpack.sizes.stats')}`"/>
         <VueSelectButton value="parsed" :label="`${$t('vue-webpack.sizes.parsed')}`"/>
         <VueSelectButton value="gzip" :label="`${$t('vue-webpack.sizes.gzip')}`"/>
       </VueSelect>
+
       <VueButton
         class="icon-button"
         icon-left="help"

packages/@vue/cli-ui-addon-webpack/src/components/WebpackDashboard.vue

@@ -19,11 +19,20 @@
           class="separator"
         />
       </template>
+
+      <VueSwitch
+        v-if="modernMode"
+        v-model="showModernBuild"
+      >
+        {{ $t('vue-webpack.modern-mode') }}
+      </VueSwitch>
+
       <VueSelect v-model="sizeField">
         <VueSelectButton value="stats" :label="`${$t('vue-webpack.sizes.stats')}`"/>
         <VueSelectButton value="parsed" :label="`${$t('vue-webpack.sizes.parsed')}`"/>
         <VueSelectButton value="gzip" :label="`${$t('vue-webpack.sizes.gzip')}`"/>
       </VueSelect>
+
       <VueButton
         class="icon-button"
         icon-left="help"
@@ -67,12 +76,6 @@ export default {
     SpeedStats,
     AssetList,
     ModuleList
-  },
-
-  sharedData () {
-    return {
-      serveUrl: `webpack-dashboard-serve-url`
-    }
   }
 }
 </script>

packages/@vue/cli-ui-addon-webpack/src/mixins/Dashboard.js

@@ -14,21 +14,51 @@ export default {
     }
   },
 
+  sharedData () {
+    return {
+      serveUrl: `webpack-dashboard-serve-url`,
+      modernMode: `webpack-dashboard-modern-mode`
+    }
+  },
+
   computed: {
     sizeField: {
       get () { return this.$store.getters.sizeField },
       set (value) { this.$store.commit('sizeField', value) }
+    },
+
+    showModernBuild: {
+      get () { return this.$store.state.showModernBuild },
+      set (value) { this.$store.commit('showModernBuild', value) }
+    }
+  },
+
+  watch: {
+    modernMode: {
+      handler (value) {
+        this.showModernBuild = value
+      },
+      immediate: true
     }
   },
 
   created () {
     const mode = this.mode = this.TaskDetails.task.command.indexOf('vue-cli-service serve') !== -1 ? 'serve' : 'build'
     this.$store.commit('mode', mode)
-    this.$watchSharedData(`webpack-dashboard-${mode}-stats`, value => {
-      this.$store.commit('stats', {
-        mode,
-        value
+    if (mode === 'build') {
+      this.syncMode('build-modern')
+    }
+    this.syncMode(mode)
+  },
+
+  methods: {
+    syncMode (mode) {
+      this.$watchSharedData(`webpack-dashboard-${mode}-stats`, value => {
+        this.$store.commit('stats', {
+          mode,
+          value
+        })
       })
-    })
+    }
   }
 }

packages/@vue/cli-ui-addon-webpack/src/store/index.js

@@ -10,19 +10,28 @@ const store = new Vuex.Store({
     return {
       sizeField: localStorage.getItem('vue-webpack.sizeField') || 'parsed',
       mode: 'serve',
+      showModernBuild: true,
       serve: {
         stats: null
       },
       build: {
         stats: null
+      },
+      'build-modern': {
+        stats: null
       }
     }
   },
 
   getters: {
     sizeField: state => state.sizeField,
-    mode: state => state.mode,
-    stats: state => state[state.mode].stats,
+    mode: state => {
+      if (state.mode === 'build' && state.showModernBuild) {
+        return 'build-modern'
+      }
+      return state.mode
+    },
+    stats: (state, getters) => state[getters.mode].stats,
     errors: (state, getters) => (getters.stats && getters.stats.data.errors) || [],
     warnings: (state, getters) => (getters.stats && getters.stats.data.warnings) || [],
     assets: (state, getters) => (getters.stats && getters.stats.data.assets) || [],
@@ -47,6 +56,10 @@ const store = new Vuex.Store({
       state.mode = value
     },
 
+    showModernBuild (state, value) {
+      state.showModernBuild = value
+    },
+
     stats (state, { mode, value }) {
       state[mode].stats = value
     }

packages/@vue/cli-ui/locales/en.json

@@ -410,6 +410,7 @@
       "gzip": "Gzip",
       "help": "<b>Stats:</b> size from webpack stats data.<br><b>Parsed:</b> size from extracted source (after minification plugins). More accurate.<br><b>Gzip:</b> size of gzipped extracted source."
     },
+    "modern-mode": "Show modern build",
     "tasks": {
       "serve": {
         "description": "Compiles and hot-reloads for development",
@@ -431,7 +432,11 @@
           "wc-async": "Async web component"
         },
         "name": "Name for library or web-component mode (default: 'name' in package.json or entry filename)",
-        "watch": "Watch for changes"
+        "watch": "Watch for changes",
+        "modern": {
+          "label": "Modern mode",
+          "description": "Build app targeting modern browsers with auto fallback"
+        }
       },
       "inspect": {
         "description": "Inspect the resolved webpack config",