feat: add --analyze and --profile flags

fengzilong · fengzilong · commit af79a4da34b0 · 2019-11-04T17:43:50.000+08:00
diff --git a/packages/driver-pages/lib/driver.js b/packages/driver-pages/lib/driver.js
@@ -9,6 +9,8 @@ const exit = require( 'exit' )
 const whyIsNodeRunning = require( 'why-is-node-running' )
 const VirtualModulesPlugin = require( '@nut-project/webpack-virtual-modules' )
 const HtmlWebpackPlugin = require( 'html-webpack-plugin' )
+const BundleAnalyzerPlugin = require( 'webpack-bundle-analyzer' ).BundleAnalyzerPlugin
+const WebpackBar = require( 'webpackbar' )
 const {
   config, logger, openBrowser, detectPort, install, colors
 } = require( '@nut-project/dev-utils' )
@@ -268,6 +270,15 @@ class PagesDriver {
     this.webpack
       .plugin( 'html' )
       .use( HtmlWebpackPlugin )
+
+    this.webpack
+      .plugin( 'webpackbar' )
+      .use( WebpackBar, [
+        {
+          name: 'client'
+        }
+      ] )
+      .end()
   }
 
   async apply() {
@@ -296,6 +307,30 @@ class PagesDriver {
     Object.keys( commands )
       .forEach( name => {
         commands[ name ].action( async cliOptions => {
+          if ( cliOptions.analyze ) {
+            this.webpack
+              .plugin( 'bundle-analyzer' )
+              .use( BundleAnalyzerPlugin )
+          }
+
+          if ( cliOptions.profile ) {
+            this.webpack
+              .plugin( 'webpackbar' )
+              .tap( args => {
+                return args.map( arg => {
+                  if ( !arg ) {
+                    arg = {}
+                  }
+
+                  return {
+                    ...arg,
+                    profile: true,
+                    reporters: [ 'fancy', 'profile' ],
+                  }
+                } )
+              } )
+          }
+
           this.start = async () => {
             let env = this._mapCommandToEnv( name )
 
@@ -317,6 +352,8 @@ class PagesDriver {
             await this.applyPlugins( this.config.userPlugins )
             await this.hooks.afterUserPlugins.promise()
 
+            await this.hooks.chainWebpack.promise( this.webpack )
+
             await this.hooks.beforeRun.promise()
 
             await this.run()
@@ -378,7 +415,7 @@ class PagesDriver {
       beforeUserPlugins: new AsyncSeriesWaterfallHook( [ 'plugins' ] ),
       beforeRun: new AsyncSeriesHook(),
       afterClearConsole: new AsyncSeriesHook(),
-      toConfig: new AsyncSeriesHook(),
+      modifyWebpack: new AsyncSeriesHook(),
       afterUserPlugins: new AsyncSeriesHook(),
       afterBuild: new AsyncSeriesHook( [ 'error', 'stats' ] ),
       compiler: new SyncHook( [ 'compiler' ] ),
@@ -393,11 +430,9 @@ class PagesDriver {
   async run() {
     const { env } = this
 
-    await this.hooks.chainWebpack.promise( this.webpack )
-
     const webpackConfig = this.webpack.toConfig()
 
-    await this.hooks.toConfig.promise( webpackConfig )
+    await this.hooks.modifyWebpack.promise( webpackConfig )
 
     if ( env === 'development' ) {
       let serverOptions = {
diff --git a/packages/driver-pages/package.json b/packages/driver-pages/package.json
@@ -41,18 +41,20 @@
   "license": "MIT",
   "dependencies": {
     "@nut-project/dev-utils": "^1.0.0-alpha.2",
-    "@nut-project/webpack-virtual-modules": "^1.0.0-alpha.2",
     "@nut-project/webpack": "^1.0.0-alpha.2",
-    "html-webpack-plugin": "^3.2.0",
+    "@nut-project/webpack-virtual-modules": "^1.0.0-alpha.2",
     "chokidar": "^3.1.0",
     "exit": "^0.1.2",
     "globby": "^10.0.1",
+    "html-webpack-plugin": "^3.2.0",
     "import-fresh": "^3.1.0",
     "pretty-bytes": "^5.2.0",
     "readline": "^1.3.0",
     "resolve-from": "^5.0.0",
     "tapable": "^1.1.3",
     "tildify": "^2.0.0",
+    "webpack-bundle-analyzer": "^3.6.0",
+    "webpackbar": "^4.0.0",
     "why-is-node-running": "^2.1.0"
   }
 }
diff --git a/plugins/pages/materials/lib/index.js b/plugins/pages/materials/lib/index.js
@@ -12,7 +12,7 @@ const ID = 'materials'
 exports.name = ID
 
 exports.apply = async ( api, options ) => {
-  api.hooks.beforeRun.tapPromise( ID, async () => {
+  api.hooks.chainWebpack.tapPromise( ID, async () => {
     if ( api.env !== 'development' ) {
       return
     }
diff --git a/plugins/pages/microfrontends/lib/index.js b/plugins/pages/microfrontends/lib/index.js
@@ -83,9 +83,10 @@ module.exports = {
       }
     } )
 
-    // chainWebpack is after beforeRun
-    // let other plugins use beforeRun hook to add modules
-    api.hooks.chainWebpack.tapPromise( ID, async () => {
+    // other plugins will use chainWebpack hook to add runtime modules
+    // core plugins is ahead of all user plugins
+    // so we should use beforeRun hook to get all runtime modules
+    api.hooks.beforeRun.tapPromise( ID, async () => {
       extend( api.webpack, api.config, api.env )
 
       await this.base()
@@ -273,9 +274,7 @@ module.exports = {
       nutConfig.chainWebpack( config )
     }
 
-    this.api.hooks.toConfig.tapPromise( ID, async () => {
-      this.setupDevServer( nutConfig )
-    } )
+    this.setupDevServer( nutConfig )
   },
 
   async getAllPages() {
diff --git a/plugins/pages/microfrontends/lib/webpack/config/base.js b/plugins/pages/microfrontends/lib/webpack/config/base.js
@@ -2,7 +2,6 @@ const path = require( 'path' )
 const FriendlyErrorsWebpackPlugin = require( 'friendly-errors-webpack-plugin' )
 const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' )
 const VueLoaderPlugin = require( 'vue-loader/lib/plugin' )
-const WebpackBar = require( 'webpackbar' )
 const { webpack } = require( '@nut-project/webpack' )
 const threadLoader = require( 'thread-loader' )
 const resolveFrom = require( 'resolve-from' )
@@ -44,7 +43,6 @@ module.exports = function ( config, options ) {
   ts( config, options )
   perfHints( config )
   extensions( config )
-  progress( config )
   vue( config )
   pug( config )
   image( config )
@@ -236,13 +234,6 @@ function pug( config ) {
     .end()
 }
 
-function progress( config ) {
-  config
-    .plugin( 'webpackbar' )
-    .use( WebpackBar )
-    .end()
-}
-
 function clean( config ) {
   config.plugin( 'clean' )
     .use( CleanWebpackPlugin )
diff --git a/plugins/pages/microfrontends/package.json b/plugins/pages/microfrontends/package.json
@@ -109,7 +109,6 @@
     "vue-loader": "^15.7.1",
     "vue-template-compiler": "^2.6.10",
     "webpack-stats-plugin": "^0.3.0",
-    "webpackbar": "^4.0.0",
     "ws": "^7.1.2"
   }
 }
diff --git a/website/package.json b/website/package.json
@@ -8,8 +8,8 @@
     "create-pages": "node ../packages/cli/bin/index.js pages create demo"
   },
   "dependencies": {
+    "@zeit-ui/themes": "^0.1.0",
     "@zeit-ui/vue": "1.3.1",
-    "element-ui": "^2.12.0",
     "vue": ">2.0.0"
   }
 }
diff --git a/website/pages.config.js b/website/pages.config.js
@@ -22,7 +22,7 @@ function getNowOptions( options = {} ) {
 }
 
 const config = {
-  verbose: true,
+  verbose: false,
   port: 9000,
   router: {
     mode: 'history',
diff --git a/website/src/app.js b/website/src/app.js
@@ -1,13 +1,12 @@
 import Vue from 'vue'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
 import * as Files from '@zeit-ui/vue/lib/files.common'
 import * as Link from '@zeit-ui/vue/lib/link.common'
 import * as Card from '@zeit-ui/vue/lib/card.common'
 import * as Note from '@zeit-ui/vue/lib/note.common'
 import * as Fieldset from '@zeit-ui/vue/lib/fieldset.common'
 import * as Button from '@zeit-ui/vue/lib/button.common'
 import * as Switcher from '@zeit-ui/vue/lib/switcher.common'
+import '@zeit-ui/themes/index.css'
 import '@zeit-ui/vue/lib/files.css'
 import '@zeit-ui/vue/lib/link.css'
 import '@zeit-ui/vue/lib/card.css'
@@ -18,7 +17,6 @@ import '@zeit-ui/vue/lib/switcher.css'
 import '@/css/index.less'
 
 export default ( { api } ) => {
-  Vue.use( ElementUI )
   Files.install( Vue )
   Link.install( Vue )
   Card.install( Vue )
diff --git a/yarn.lock b/yarn.lock
@@ -2257,6 +2257,11 @@ acorn-node@^1.6.1:
     acorn-walk "^7.0.0"
     xtend "^4.0.2"
 
+acorn-walk@^6.1.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
+  integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
+
 acorn-walk@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.0.0.tgz#c8ba6f0f1aac4b0a9e32d1f0af12be769528f36b"
@@ -2823,6 +2828,16 @@ before-after-hook@^2.0.0:
   resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.1.0.tgz#b6c03487f44e24200dd30ca5e6a1979c5d2fb635"
   integrity sha512-IWIbu7pMqyw3EAJHzzHbWa85b6oud/yfKYg5rqB5hNE8CeMi3nX+2C2sj0HswfblST86hpVEOAb9x34NZd6P7A==
 
+bfj@^6.1.1:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/bfj/-/bfj-6.1.2.tgz#325c861a822bcb358a41c78a33b8e6e2086dde7f"
+  integrity sha512-BmBJa4Lip6BPRINSZ0BPEIfB1wUY/9rwbwvIHQA1KjX9om29B6id0wnWXq7m3bn5JrUVjeOTnVuhPT1FiHwPGw==
+  dependencies:
+    bluebird "^3.5.5"
+    check-types "^8.0.3"
+    hoopy "^0.1.4"
+    tryer "^1.0.1"
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -3424,6 +3439,11 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+check-types@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
+  integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==
+
 "chokidar@>=2.0.0 <4.0.0", chokidar@^3.1.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.2.1.tgz#4634772a1924512d990d4505957bf3a510611387"
@@ -4892,7 +4912,7 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-ejs@^2.5.7:
+ejs@^2.5.7, ejs@^2.6.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.1.tgz#5b5ab57f718b79d4aca9254457afecd36fa80228"
   integrity sha512-kS/gEPzZs3Y1rRsbGX4UOSjtP/CeJP0CxSNZHYxGfVM/VgLcv0ZqM7C45YyTj2DI2g7+P9Dd24C+IMIg6D0nYQ==
@@ -5351,7 +5371,7 @@ expand-brackets@^2.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-express@^4.17.1:
+express@^4.16.3, express@^4.17.1:
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
   integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
@@ -5604,6 +5624,11 @@ filenamify@^2.0.0:
     strip-outer "^1.0.0"
     trim-repeated "^1.0.0"
 
+filesize@^3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
+  integrity sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==
+
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
@@ -6230,6 +6255,14 @@ gunzip-maybe@^1.4.1:
     pumpify "^1.3.3"
     through2 "^2.0.3"
 
+gzip-size@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
+  integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==
+  dependencies:
+    duplexer "^0.1.1"
+    pify "^4.0.1"
+
 handle-thing@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
@@ -6467,6 +6500,11 @@ hogan.js@^3.0.2:
     mkdirp "0.3.0"
     nopt "1.0.10"
 
+hoopy@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
+  integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
+
 hosted-git-info@^2.1.4, hosted-git-info@^2.7.1:
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
@@ -7956,7 +7994,7 @@ lodash@4.17.14:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba"
   integrity sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==
 
-lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1:
+lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -9068,6 +9106,11 @@ opencollective-postinstall@^2.0.2:
   resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89"
   integrity sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==
 
+opener@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.1.tgz#6d2f0e77f1a0af0032aca716c2c1fbb8e7e8abed"
+  integrity sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==
+
 opn@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
@@ -12264,6 +12307,11 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.4.tgz#3b52b1f13924f460c3fbfd0df69b587dbcbc762e"
   integrity sha512-tdzBRDGWcI1OpPVmChbdSKhvSVurznZ8X36AYURAcl+0o2ldlCY2XPzyXNNxwJwwyIU+rIglTCG4kxtNKBQH7Q==
 
+tryer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
+  integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
+
 ts-loader@^6.1.2:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-6.2.0.tgz#52d3993ecbc5474c1513242388e1049da0fce880"
@@ -12920,6 +12968,25 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
+webpack-bundle-analyzer@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.6.0.tgz#39b3a8f829ca044682bc6f9e011c95deb554aefd"
+  integrity sha512-orUfvVYEfBMDXgEKAKVvab5iQ2wXneIEorGNsyuOyVYpjYrI7CUOhhXNDd3huMwQ3vNNWWlGP+hzflMFYNzi2g==
+  dependencies:
+    acorn "^6.0.7"
+    acorn-walk "^6.1.1"
+    bfj "^6.1.1"
+    chalk "^2.4.1"
+    commander "^2.18.0"
+    ejs "^2.6.1"
+    express "^4.16.3"
+    filesize "^3.6.1"
+    gzip-size "^5.0.0"
+    lodash "^4.17.15"
+    mkdirp "^0.5.1"
+    opener "^1.5.1"
+    ws "^6.0.0"
+
 webpack-chain@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/webpack-chain/-/webpack-chain-6.0.0.tgz#9c36525a1271a54e7bfd1791199b395f400ae4f1"
@@ -13244,7 +13311,7 @@ write@1.0.3:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@^6.2.1:
+ws@^6.0.0, ws@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
   integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ const ID = 'materials'`
`12`	`12`	`exports.name = ID`
`13`	`13`
`14`	`14`	`exports.apply = async ( api, options ) => {`
`15`		`- api.hooks.beforeRun.tapPromise( ID, async () => {`
	`15`	`+ api.hooks.chainWebpack.tapPromise( ID, async () => {`
`16`	`16`	`if ( api.env !== 'development' ) {`
`17`	`17`	`return`
`18`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -109,7 +109,6 @@`
`109`	`109`	`"vue-loader": "^15.7.1",`
`110`	`110`	`"vue-template-compiler": "^2.6.10",`
`111`	`111`	`"webpack-stats-plugin": "^0.3.0",`
`112`		`- "webpackbar": "^4.0.0",`
`113`	`112`	`"ws": "^7.1.2"`
`114`	`113`	`}`
`115`	`114`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,8 +8,8 @@`
`8`	`8`	`"create-pages": "node ../packages/cli/bin/index.js pages create demo"`
`9`	`9`	`},`
`10`	`10`	`"dependencies": {`
	`11`	`+ "@zeit-ui/themes": "^0.1.0",`
`11`	`12`	`"@zeit-ui/vue": "1.3.1",`
`12`		`- "element-ui": "^2.12.0",`
`13`	`13`	`"vue": ">2.0.0"`
`14`	`14`	`}`
`15`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ function getNowOptions( options = {} ) {`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`const config = {`
`25`		`- verbose: true,`
	`25`	`+ verbose: false,`
`26`	`26`	`port: 9000,`
`27`	`27`	`router: {`
`28`	`28`	`mode: 'history',`