From c29669b1496b2088697084400957f51bb54abddc Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Thu, 26 Apr 2018 01:58:04 +0200
Subject: [PATCH] feat(ui): webpack analyzer

---
 .../lib/webpack/DashboardPlugin.js            |   3 +
 packages/@vue/cli-service/ui.js               |  37 +-
 .../src/components/DonutModule.vue            | 151 ++++++++
 .../src/components/WebpackAnalyzer.vue        | 325 ++++++++++++++++++
 .../src/components/WebpackDashboard.vue       |  34 +-
 .../@vue/cli-ui-addon-webpack/src/main.js     |   2 +
 .../src/mixins/Dashboard.js                   |  34 ++
 .../cli-ui-addon-webpack/src/store/index.js   |   5 +-
 .../cli-ui-addon-webpack/src/util/colors.js   |  34 ++
 .../cli-ui-addon-webpack/src/util/modules.js  | 116 +++++++
 .../cli-ui/src/views/ProjectTaskDetails.vue   | 112 +++---
 11 files changed, 747 insertions(+), 106 deletions(-)
 create mode 100644 packages/@vue/cli-ui-addon-webpack/src/components/DonutModule.vue
 create mode 100644 packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue
 create mode 100644 packages/@vue/cli-ui-addon-webpack/src/mixins/Dashboard.js
 create mode 100644 packages/@vue/cli-ui-addon-webpack/src/util/colors.js

diff --git a/packages/@vue/cli-service/lib/webpack/DashboardPlugin.js b/packages/@vue/cli-service/lib/webpack/DashboardPlugin.js
index 16810f78d9..8c37c56d25 100644
--- a/packages/@vue/cli-service/lib/webpack/DashboardPlugin.js
+++ b/packages/@vue/cli-service/lib/webpack/DashboardPlugin.js
@@ -190,6 +190,9 @@ class DashboardPlugin {
         asset.fullPath = path.join(outputPath, asset.name)
         asset.gzipSize = assetSources && getGzipSize(assetSources.get(asset.name))
       })
+      statsData.modules.forEach(module => {
+        module.gzipSize = module.source && getGzipSize(module.source)
+      })
 
       const hasErrors = stats.hasErrors()
 
diff --git a/packages/@vue/cli-service/ui.js b/packages/@vue/cli-service/ui.js
index 349d5823d3..10c9e760f3 100644
--- a/packages/@vue/cli-service/ui.js
+++ b/packages/@vue/cli-service/ui.js
@@ -30,6 +30,23 @@ module.exports = api => {
   }
 
   // Tasks
+  const views = {
+    views: [
+      {
+        id: 'vue-webpack-dashboard',
+        label: 'Dashboard',
+        icon: 'dashboard',
+        component: 'vue-webpack-dashboard'
+      },
+      {
+        id: 'vue-webpack-analyzer',
+        label: 'Analyzer',
+        icon: 'donut_large',
+        component: 'vue-webpack-analyzer'
+      }
+    ],
+    defaultView: 'vue-webpack-dashboard'
+  }
   api.describeTask({
     match: /vue-cli-service serve/,
     description: 'Compiles and hot-reloads for development',
@@ -100,15 +117,7 @@ module.exports = api => {
       api.ipcOff(onWebpackMessage)
       removeSharedData('serve-url')
     },
-    views: [
-      {
-        id: 'vue-webpack-dashboard',
-        label: 'Dashboard',
-        icon: 'dashboard',
-        component: 'vue-webpack-dashboard'
-      }
-    ],
-    defaultView: 'vue-webpack-dashboard'
+    ...views
   })
   api.describeTask({
     match: /vue-cli-service build/,
@@ -189,15 +198,7 @@ module.exports = api => {
     onExit: () => {
       api.ipcOff(onWebpackMessage)
     },
-    views: [
-      {
-        id: 'vue-webpack-dashboard',
-        label: 'Dashboard',
-        icon: 'dashboard',
-        component: 'vue-webpack-dashboard'
-      }
-    ],
-    defaultView: 'vue-webpack-dashboard'
+    ...views
   })
 
   // Webpack dashboard
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/DonutModule.vue b/packages/@vue/cli-ui-addon-webpack/src/components/DonutModule.vue
new file mode 100644
index 0000000000..1d9325053a
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/DonutModule.vue
@@ -0,0 +1,151 @@
+<template>
+  <g
+    v-if="visible"
+    class="donut-module"
+    :class="{
+      hover
+    }"
+    :transform="`translate(-${size / 2}, -${size / 2}) rotate(${rotation}, ${size / 2}, ${size / 2})`"
+  >
+    <g class="container">
+      <path
+        ref="path"
+        class="progress"
+        :d="`M ${size / 2}, ${size / 2}
+        m 0, -${size / 2}
+        a ${size / 2},${size / 2} 0 1 1 0,${size}
+        a ${size / 2},${size / 2} 0 1 1 0,-${size}`"
+        :stroke-dasharray="`${finalDasharray - .25} ${finalDasharray - .25}`"
+        :stroke-dashoffset="finalDashoffset"
+        :stroke="stroke"
+      />
+    </g>
+
+    <g
+      v-if="depth + 1 < colors.length"
+      class="children"
+      :transform="`translate(${size / 2}, ${size / 2})`"
+    >
+      <DonutModule
+        v-for="module of module.children"
+        :key="module.id"
+        :module="module"
+        :depth="depth + 1"
+        :parent-ratio="ratio"
+        :colors="colors"
+      />
+    </g>
+  </g>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'DonutModule',
+
+  inject: [
+    'WebpackAnalyzer'
+  ],
+
+  props: {
+    module: {
+      type: Object,
+      required: true
+    },
+
+    depth: {
+      type: Number,
+      required: true
+    },
+
+    parentRatio: {
+      type: Number,
+      required: true
+    },
+
+    colors: {
+      type: Array,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      dasharray: 0,
+      dashoffset: 0,
+      animating: false
+    }
+  },
+
+  computed: {
+    ...mapGetters([
+      'useGzip'
+    ]),
+
+    finalDasharray () {
+      return (this.finalDashoffset === 0 ||
+        this.finalDashoffset === this.dasharray * 2)
+        ? 0 : this.dasharray
+    },
+
+    finalDashoffset () {
+      if (this.animating) {
+        return this.dashoffset
+      } else {
+        if (this.ratio < 0) {
+          return -this.dasharray * this.ratio + this.dasharray
+        } else {
+          return (1 - this.ratio) * this.dasharray
+        }
+      }
+    },
+
+    sizeField () {
+      return this.useGzip ? 'gzip' : 'disk'
+    },
+
+    ratio () {
+      return this.module.size[this.sizeField] / this.module.parent.size[this.sizeField] * this.parentRatio
+    },
+
+    rotation () {
+      return this.module.previousSize[this.sizeField] / this.module.parent.size[this.sizeField] * this.parentRatio * 360
+    },
+
+    size () {
+      return this.depth * 6.5 + 40
+    },
+
+    stroke () {
+      return this.colors[this.depth]
+    },
+
+    visible () {
+      return this.ratio > .003
+    },
+
+    hover () {
+      return this.WebpackAnalyzer.hoverModule === this.module
+    }
+  },
+
+  mounted () {
+    if (this.visible) {
+      this.dasharray = this.$refs.path.getTotalLength()
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@vue/cli-ui/src/style/imports"
+
+path
+  fill none
+  stroke-width 3
+
+.hover > .container
+  path
+    stroke $vue-ui-color-warning
+</style>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue b/packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue
new file mode 100644
index 0000000000..f28d5a56af
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue
@@ -0,0 +1,325 @@
+<template>
+  <div class="vue-webpack-analyzer">
+    <div class="pane-toolbar">
+      <VueIcon icon="donut_large"/>
+      <div class="title">Analyzer</div>
+
+      <template v-if="currentTree">
+        <VueButton
+          icon-left="arrow_upward"
+          label="Go up"
+          :disabled="currentTree === rootTree"
+          @click="goToParent()"
+        />
+        <VueButton
+          icon-left="home"
+          label="Go to home"
+          :disabled="currentTree === rootTree"
+          @click="goToHome()"
+        />
+        <VueIcon
+          icon="lens"
+          class="separator"
+        />
+      </template>
+      <VueSelect v-model="selectedChunk">
+        <VueSelectButton
+          v-for="(chunk, key) of modulesTrees"
+          :key="key"
+          :value="key"
+          :label="`Chunk ${getChunkName(key)}`"
+        />
+      </VueSelect>
+      <VueSwitch
+        v-model="useGzip"
+      >
+        Gzip size
+      </VueSwitch>
+    </div>
+
+    <div class="content">
+      <template v-if="currentTree">
+        <svg
+          ref="svg"
+          class="donut"
+          :class="{
+            hover: hoverModule
+          }"
+          viewBox="0 0 80 80"
+          @mousemove="onMouseMove"
+          @mouseout="onMouseOut"
+          @click="onDonutClick"
+        >
+          <g transform="translate(40, 40)">
+            <DonutModule
+              v-for="(module, index) of currentTree.children"
+              :key="module.id"
+              :module="module"
+              :colors="getColors(index)"
+              :depth="0"
+              :parent-ratio="1"
+            />
+          </g>
+        </svg>
+      </template>
+
+      <div class="described-module">
+        <div class="wrapper">
+          <div class="path" v-html="modulePath"/>
+          <div
+            class="disk size"
+            :class="{ selected: !useGzip }"
+          >
+            Disk: {{ describedModule.size.disk | size('B')}}
+          </div>
+          <div
+            class="gzip size"
+            :class="{ selected: useGzip }"
+          >
+            Gzip: {{ describedModule.size.gzip | size('B')}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Dashboard from '../mixins/Dashboard'
+import colors from '../util/colors'
+import { size } from '../filters'
+
+import DonutModule from './DonutModule.vue'
+
+export default {
+  mixins: [
+    Dashboard
+  ],
+
+  filters: {
+    size
+  },
+
+  components: {
+    DonutModule
+  },
+
+  provide () {
+    return {
+      WebpackAnalyzer: this.injection
+    }
+  },
+
+  data () {
+    return {
+      selectedChunk: null,
+      injection: {
+        hoverModule: null
+      },
+      currentTree: null
+    }
+  },
+
+  computed: {
+    ...mapGetters([
+      'modulesTrees',
+      'chunks'
+    ]),
+
+    hoverModule: {
+      get () { return this.injection.hoverModule },
+      set (value) { return this.injection.hoverModule = value }
+    },
+
+    describedModule () {
+      return this.hoverModule || this.currentTree
+    },
+
+    modulePath () {
+      let path = `<b>${this.describedModule.id}</b>`
+      let module = this.describedModule
+      while (module.parent && module !== this.currentTree) {
+        module = module.parent
+        path = `${module.id} / ${path}`
+      }
+      return path
+    },
+
+    rootTree () {
+      return this.modulesTrees && this.modulesTrees[this.selectedChunk]
+    }
+  },
+
+  watch: {
+    modulesTrees: {
+      handler (value) {
+        if (!this.selectedChunk && value) {
+          const keys = Object.keys(value)
+          if (keys.length) {
+            this.selectedChunk = keys[0]
+          }
+        }
+      },
+      immediate: true
+    },
+
+    selectedChunk: {
+      handler: 'goToHome',
+      immediate: true
+    }
+  },
+
+  methods: {
+    getColors (index) {
+      return colors[index % colors.length]
+    },
+
+    getChunk (id) {
+      return this.chunks.find(
+        c => c.id.toString() === id.toString()
+      )
+    },
+
+    getChunkName (id) {
+      const chunk = this.getChunk(id)
+      if (chunk) {
+        if (chunk.names && chunk.names.length) {
+          return `${chunk.names[0]} (${id})`
+        }
+        if (chunk.files && chunk.files.length) {
+          return `${chunk.files[0]} (${id})`
+        }
+      }
+      return id
+    },
+
+    onMouseMove (event) {
+      const svg = this.$refs.svg
+      const { clientX, clientY } = event
+      const pt = svg.createSVGPoint()
+      pt.x = clientX
+      pt.y = clientY
+      let { x, y } = pt.matrixTransform(svg.getScreenCTM().inverse())
+      x -= 40
+      y -= 40
+
+      let angle = (Math.atan2(y, x) / Math.PI * 180 + 90)
+      // Modulo 360
+      angle = ((angle % 360) + 360) % 360
+      const distance = Math.sqrt(x * x + y * y)
+      const depth = Math.floor(((distance + 1.5) * 2 - 40) / 6.5)
+
+      if (depth < 0) {
+        this.hoverModule = null
+        return
+      }
+
+      // Walk the tree to find the hovered module
+      const sizeField = this.useGzip ? 'gzip' : 'disk'
+      let tree = this.currentTree
+      let rotation = angle
+      let ratio = rotation / 360
+      // We use a target module size
+      let targetSize = tree.size[sizeField] * ratio
+      let parentRatio = 1
+      for (let d = 0; d <= depth; d++) {
+        let found = false
+        for (const child of tree.children) {
+          const previousSize = child.previousSize[sizeField]
+          const size = child.size[sizeField]
+          if (previousSize + size >= targetSize) {
+            // Select child
+            const parentSize = tree.size[sizeField]
+            const childRatio = size / parentSize * parentRatio
+            const childRotation = previousSize / parentSize * parentRatio * 360
+            // We update rotation to become relative to selected child
+            rotation -= childRotation
+            // We calculate a new target module size relative to selected child
+            ratio = rotation / 360 / childRatio
+            targetSize = size * ratio
+            // New base ratio to deeper children
+            parentRatio = childRatio
+            // Go deeper
+            tree = child
+            found = true
+            break
+          }
+        }
+        if (!found) {
+          tree = null
+          break
+        }
+      }
+      this.hoverModule = tree
+    },
+
+    onMouseOut (event) {
+      this.hoverModule = null
+    },
+
+    onDonutClick () {
+      if (this.hoverModule && this.hoverModule.children.length) {
+        this.currentTree = this.hoverModule
+        this.hoverModule = null
+      }
+    },
+
+    goToParent () {
+      if (this.currentTree && this.currentTree.parent) {
+        this.currentTree = this.currentTree.parent
+      }
+    },
+
+    goToHome () {
+      this.currentTree = this.rootTree
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@vue/cli-ui/src/style/imports"
+
+.vue-webpack-analyzer
+  height 100%
+  display grid
+  grid-template-columns auto
+  grid-template-rows auto 1fr
+  grid-gap $padding-item
+  overflow-y hidden
+
+  .pane-toolbar,
+  .described-module .wrapper
+    padding $padding-item
+    background $vue-ui-color-light-neutral
+    border-radius $br
+
+  .content
+    display flex
+    flex-direction row
+    position relative
+
+  .donut
+    width 100%
+    &.hover
+      cursor pointer
+
+  .described-module
+    position absolute
+    top 0
+    left 0
+    width 100%
+    height 100%
+    pointer-events none
+    v-box()
+    box-center()
+
+    .wrapper
+      max-width 170px
+      overflow hidden
+
+      .size
+        &:not(.selected)
+          opacity .5
+</style>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/WebpackDashboard.vue b/packages/@vue/cli-ui-addon-webpack/src/components/WebpackDashboard.vue
index 7ae3c31a3a..4a401276f5 100644
--- a/packages/@vue/cli-ui-addon-webpack/src/components/WebpackDashboard.vue
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/WebpackDashboard.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import store from '../store'
+import Dashboard from '../mixins/Dashboard'
 
 import BuildStatus from './BuildStatus'
 import BuildProgress from './BuildProgress'
@@ -51,7 +51,9 @@ import AssetList from './AssetList'
 import ModuleList from './ModuleList'
 
 export default {
-  store,
+  mixins: [
+    Dashboard
+  ],
 
   components: {
     BuildStatus,
@@ -61,38 +63,10 @@ export default {
     ModuleList
   },
 
-  inject: [
-    'TaskDetails'
-  ],
-
-  data () {
-    return {
-      mode: null
-    }
-  },
-
   sharedData () {
     return {
       serveUrl: `webpack-dashboard-serve-url`
     }
-  },
-
-  computed: {
-    useGzip: {
-      get () { return this.$store.getters.useGzip },
-      set (value) { this.$store.commit('useGzip', value) }
-    }
-  },
-
-  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
-      })
-    })
   }
 }
 </script>
diff --git a/packages/@vue/cli-ui-addon-webpack/src/main.js b/packages/@vue/cli-ui-addon-webpack/src/main.js
index 001bb2f0ba..688f204ae4 100644
--- a/packages/@vue/cli-ui-addon-webpack/src/main.js
+++ b/packages/@vue/cli-ui-addon-webpack/src/main.js
@@ -1,5 +1,6 @@
 import VueProgress from 'vue-progress-path'
 import WebpackDashboard from './components/WebpackDashboard.vue'
+import WebpackAnalyzer from './components/WebpackAnalyzer.vue'
 import TestView from './components/TestView.vue'
 
 Vue.use(VueProgress, {
@@ -7,6 +8,7 @@ Vue.use(VueProgress, {
 })
 
 ClientAddonApi.component('vue-webpack-dashboard', WebpackDashboard)
+ClientAddonApi.component('vue-webpack-analyzer', WebpackAnalyzer)
 
 ClientAddonApi.addRoutes('vue-webpack', [
   { path: '', name: 'test-webpack-route', component: TestView }
diff --git a/packages/@vue/cli-ui-addon-webpack/src/mixins/Dashboard.js b/packages/@vue/cli-ui-addon-webpack/src/mixins/Dashboard.js
new file mode 100644
index 0000000000..f2cc871d8f
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/mixins/Dashboard.js
@@ -0,0 +1,34 @@
+import store from '../store'
+
+// @vue/component
+export default {
+  store,
+
+  inject: [
+    'TaskDetails'
+  ],
+
+  data () {
+    return {
+      mode: null
+    }
+  },
+
+  computed: {
+    useGzip: {
+      get () { return this.$store.getters.useGzip },
+      set (value) { this.$store.commit('useGzip', value) }
+    }
+  },
+
+  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
+      })
+    })
+  }
+}
diff --git a/packages/@vue/cli-ui-addon-webpack/src/store/index.js b/packages/@vue/cli-ui-addon-webpack/src/store/index.js
index 78d479681a..f696891b37 100644
--- a/packages/@vue/cli-ui-addon-webpack/src/store/index.js
+++ b/packages/@vue/cli-ui-addon-webpack/src/store/index.js
@@ -1,7 +1,7 @@
 import Vuex from 'vuex'
 
 import { buildSortedAssets } from '../util/assets'
-import { buildDepModules } from '../util/modules'
+import { filterModules, buildDepModules, buildModulesTrees } from '../util/modules'
 
 Vue.use(Vuex)
 
@@ -28,8 +28,9 @@ const store = new Vuex.Store({
     assets: (state, getters) => (getters.stats && getters.stats.data.assets) || [],
     assetsSorted: (state, getters) => buildSortedAssets(getters.assets, getters.useGzip),
     assetsTotalSize: (state, getters) => getters.assetsSorted.filter(a => !a.secondary).reduce((total, asset) => total + asset.size, 0),
-    modules: (state, getters) => (getters.stats && getters.stats.data.modules) || [],
+    modules: (state, getters) => (getters.stats && filterModules(getters.stats.data.modules)) || [],
     modulesTotalSize: (state, getters) => getters.modules.reduce((total, module) => total + module.size, 0),
+    modulesTrees: (state, getters) => buildModulesTrees(getters.modules),
     depModules: (state, getters) => buildDepModules(getters.modules),
     depModulesTotalSize: (state, getters) => getters.depModules.reduce((total, module) => total + module.size, 0),
     chunks: (state, getters) => (getters.stats && getters.stats.data.chunks) || []
diff --git a/packages/@vue/cli-ui-addon-webpack/src/util/colors.js b/packages/@vue/cli-ui-addon-webpack/src/util/colors.js
new file mode 100644
index 0000000000..371f3b5d39
--- /dev/null
+++ b/packages/@vue/cli-ui-addon-webpack/src/util/colors.js
@@ -0,0 +1,34 @@
+export default [
+  [
+    '#42b983',
+    '#5DC395',
+    '#78CDA7',
+    '#93D7B9',
+    '#AEE1CB',
+    '#C9EBDD'
+  ],
+  [
+    '#A96FDA',
+    '#B684DF',
+    '#C399E4',
+    '#D0AEE9',
+    '#DDC3EE',
+    '#EAD8F3'
+  ],
+  [
+    '#03C2E6',
+    '#27CBEA',
+    '#4BD4EE',
+    '#6FDDF2',
+    '#93E6F6',
+    '#B7EFFA'
+  ],
+  [
+    '#778F9B',
+    '#8B9FA9',
+    '#9FAFB7',
+    '#B3BFC5',
+    '#C7CFD3',
+    '#DBDFE1'
+  ]
+]
diff --git a/packages/@vue/cli-ui-addon-webpack/src/util/modules.js b/packages/@vue/cli-ui-addon-webpack/src/util/modules.js
index 06db4a7b21..7032d8467b 100644
--- a/packages/@vue/cli-ui-addon-webpack/src/util/modules.js
+++ b/packages/@vue/cli-ui-addon-webpack/src/util/modules.js
@@ -2,6 +2,10 @@ const getModulePath = function (identifier) {
   return identifier.replace(/.*!/, '').replace(/\\/g, '/')
 }
 
+export function filterModules (modules) {
+  return modules.filter(module => module.name.indexOf('(webpack)') === -1)
+}
+
 export function buildDepModules (modules) {
   const deps = new Map()
   for (const module of modules) {
@@ -36,3 +40,115 @@ export function buildDepModules (modules) {
   }
   return list
 }
+
+/*
+{
+  id: './node_modules',
+  size: {
+    disk: 1024,
+    gzip: 400
+  }
+  fullPath: '/node_modules',
+  parent: undefined,
+  children: [
+    {
+      id: 'vuex',
+      identifier: '...',
+      size: {
+        disk: 42,
+        gzip: 12
+      },
+      // Total size of previous children in list
+      previousSize: {
+        disk: 0,
+        gzip: 0
+      },
+      fullPath: '/node_modules/vuex',
+      children: [
+        ...
+      ],
+      parent: ...
+    },
+    ...
+  ]
+}
+*/
+
+export function buildModulesTrees (modules) {
+  const trees = {}
+
+  for (const module of modules) {
+    const path = getModulePath(module.identifier)
+    if (path.indexOf('multi ') === 0) continue
+    const parts = path.split('/')
+    for (const treeId of module.chunks) {
+      let subtree = trees[treeId]
+      if (!subtree) {
+        subtree = trees[treeId] = {
+          id: treeId,
+          size: {
+            disk: 0,
+            gzip: 0
+          },
+          children: {}
+        }
+      }
+      let fullPath = []
+      for (let i = 0; i < parts.length; i++) {
+        const part = parts[i]
+        let child = subtree.children[part]
+        if (!child) {
+          fullPath.push(part)
+          child = subtree.children[part] = {
+            id: part,
+            size: {
+              disk: 0,
+              gzip: 0
+            },
+            fullPath: fullPath.join('/'),
+            children: {},
+            parent: subtree
+          }
+        }
+        child.size.disk += module.size
+        child.size.gzip += module.gzipSize || 0
+        // Leaf
+        if (i === parts.length - 1) {
+          child.identifier = module.identifier
+        }
+        subtree = child
+      }
+    }
+  }
+
+  for (const n in trees) {
+    let tree = trees[n]
+    let keys
+    while ((keys = Object.keys(tree.children)).length !== 0 && keys.length === 1) {
+      tree = tree.children[keys[0]]
+    }
+    walkTreeToSortChildren(tree)
+    trees[n] = tree
+  }
+
+  return trees
+}
+
+function walkTreeToSortChildren (tree) {
+  let size = {
+    disk: 0,
+    gzip: 0
+  }
+  tree.children = Object.keys(tree.children).map(
+    key => tree.children[key]
+  ).sort((a, b) => b.size.gzip - a.size.gzip)
+  for (const child of tree.children) {
+    child.previousSize = {
+      disk: size.disk,
+      gzip: size.gzip
+    }
+    size.disk += child.size.disk
+    size.gzip += child.size.gzip
+    walkTreeToSortChildren(child)
+  }
+}
diff --git a/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue b/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
index 3d1bed84c2..0bc8e78d61 100644
--- a/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
@@ -287,63 +287,63 @@ export default {
   align-items stretch
   height 100%
 
-  @media (max-width: 1250px)
-    .actions-bar
-      flex-wrap wrap
-
-    .views
-      margin-top $padding-item
-
-  .command
-    font-family $font-mono
-    font-size 12px
-    background $vue-ui-color-light-neutral
+@media (max-width: 1250px)
+  .actions-bar
+    flex-wrap wrap
+
+  .views
+    margin-top $padding-item
+
+.command
+  font-family $font-mono
+  font-size 12px
+  background $vue-ui-color-light-neutral
+  color $vue-ui-color-dark
+  padding 0 16px
+  height 32px
+  h-box()
+  box-center()
+  border-radius $br
+
+.content
+  flex 100% 1 1
+  height 0
+  margin 0 $padding-item $padding-item
+  position relative
+
+.terminal-view
+  position absolute
+  top 0
+  left 0
+  width 100%
+  height 100%
+  border-radius $br
+  &.ghost
+    opacity 0
+    pointer-events none
+
+.view
+  max-height 100%
+  overflow-x hidden
+  overflow-y auto
+
+.header
+  padding $padding-item $padding-item 0
+  h-box()
+  align-items center
+
+  .task-icon
+    margin-right 4px
+    >>> svg
+      fill $vue-ui-color-dark
+
+  .name
+    font-size 22px
     color $vue-ui-color-dark
-    padding 0 16px
-    height 32px
-    h-box()
-    box-center()
-    border-radius $br
-
-  .content
-    flex 100% 1 1
-    height 0
-    margin 0 $padding-item $padding-item
     position relative
+    top -1px
 
-  .terminal-view
-    position absolute
-    top 0
-    left 0
-    width 100%
-    height 100%
-    border-radius $br
-    &.ghost
-      opacity 0
-      pointer-events none
-
-  .view
-    max-height 100%
-    overflow-x hidden
-    overflow-y auto
-
-  .header
-    padding $padding-item $padding-item 0
-    h-box()
-    align-items center
-
-    .task-icon
-      margin-right 4px
-      >>> svg
-        fill $vue-ui-color-dark
-
-    .name
-      font-size 22px
-      color $vue-ui-color-dark
-      position relative
-      top -1px
-
-    .description
-      color $color-text-light
-      margin-left $padding-item
+  .description
+    color $color-text-light
+    margin-left $padding-item
 </style>