feat: add feat/speedMeasure

Author: chengyu.chengyulia

package.json

@@ -65,6 +65,7 @@
     "@types/semver": "6.2.0",
     "@types/socket.io": "2.1.4",
     "@types/socket.io-client": "1.4.32",
+    "@types/speed-measure-webpack-plugin": "1.3.0",
     "@types/update-notifier": "2.5.0",
     "@types/webpack": "4.41.0",
     "@types/webpack-dev-server": "3.9.0",
@@ -139,6 +140,7 @@
     "signale": "1.4.0",
     "socket.io": "2.3.0",
     "socket.io-client": "2.3.0",
+    "speed-measure-webpack-plugin": "1.3.3",
     "style-loader": "1.1.3",
     "typescript": "3.8.2",
     "update-notifier": "3.0.1",

src/utils/babel-options.ts

@@ -14,7 +14,6 @@ import transformRuntime from '@babel/plugin-transform-runtime';
 import babelPresetEnv from '@babel/preset-env';
 import babelPresetReact from '@babel/preset-react';
 import babelPresetTypescript from '@babel/preset-typescript';
-import babelPluginReactCssModules from 'babel-plugin-react-css-modules';
 import * as babelPluginReactHotLoader from 'react-hot-loader/babel';
 import * as _ from 'lodash';
 import { babelPluginReactWrappedDisplayName } from './babel-plugin-react-wrapped-display-name';
@@ -32,6 +31,7 @@ export function getBabelOptions(options?: Partial<DefaultOptions>) {
   return {
     babelrc: false,
     comments: globalState.isDevelopment,
+    cacheDirectory: true,
     presets: [[babelPresetEnv, { modules: mergedOptions.modules }], [babelPresetReact], [babelPresetTypescript]],
     plugins: [
       [transformRuntime],
@@ -49,24 +49,6 @@ export function getBabelOptions(options?: Partial<DefaultOptions>) {
       [babelPluginProposalClassProperties, { loose: true }],
       [babelPluginProposalJsonStrings],
       [babelPluginProposalOptionalCatchBinding],
-      // TODO: gulp don't support css module
-      ...(globalState && globalState.sourceConfig && globalState.sourceConfig.type === 'project'
-        ? [
-            [
-              babelPluginReactCssModules,
-              {
-                filetypes: {
-                  '.scss': {
-                    syntax: 'postcss-scss',
-                  },
-                  '.less': {
-                    syntax: 'postcss-less',
-                  },
-                },
-              },
-            ],
-          ]
-        : []),
       ...mergedOptions.plugins,
     ],
   };

src/utils/webpack-dev-server.ts

@@ -4,16 +4,20 @@ import * as normalizePath from 'normalize-path';
 import * as open from 'open';
 import * as path from 'path';
 import * as urlJoin from 'url-join';
+import * as yargs from 'yargs';
 import * as webpack from 'webpack';
 import * as WebpackBar from 'webpackbar';
 import * as CircularDependencyPlugin from 'circular-dependency-plugin';
 import * as _ from 'lodash';
 import * as WebpackDevServer from 'webpack-dev-server';
+import * as SpeedMeasurePlugin from 'speed-measure-webpack-plugin';
 import { globalState } from './global-state';
 import { tempPath } from './structor-config';
 import { logInfo } from './log';
 import { getWebpackConfig, IOptions } from './webpack-config';
 
+const smp = new SpeedMeasurePlugin();
+
 interface IExtraOptions {
   pipeConfig?: (config?: webpack.Configuration) => Promise<webpack.Configuration>;
   devServerPort: number;
@@ -86,6 +90,10 @@ export const runWebpackDevServer = async (opts: IOptions<IExtraOptions>) => {
 
   WebpackDevServer.addDevServerEntrypoints(webpackConfig as any, webpackDevServerConfig);
 
+  if (yargs.argv.measureSpeed) {
+    webpackConfig = smp.wrap(webpackConfig);
+  }
+
   const compiler = webpack(webpackConfig);
 
   const devServer = new WebpackDevServer(compiler as any, webpackDevServerConfig);

src/utils/webpack.ts

@@ -1,12 +1,16 @@
 import * as webpack from 'webpack';
 import * as WebpackBar from 'webpackbar';
+import * as SpeedMeasurePlugin from 'speed-measure-webpack-plugin';
+import * as yargs from 'yargs';
 import { getWebpackConfig, IOptions } from './webpack-config';
 import { logWarn } from './log';
 
 interface IExtraOptions {
   pipeConfig?: (config?: webpack.Configuration) => Promise<webpack.Configuration>;
 }
 
+const smp = new SpeedMeasurePlugin();
+
 const stats = {
   warnings: false,
   version: false,
@@ -26,6 +30,10 @@ export const runWebpack = async (opts: IOptions<IExtraOptions>): Promise<any> =>
 
   webpackConfig.plugins.push(new WebpackBar());
 
+  if (yargs.argv.measureSpeed) {
+    webpackConfig = smp.wrap(webpackConfig);
+  }
+
   const compiler = webpack(webpackConfig);
 
   return runCompiler(compiler);

yarn.lock

@@ -1860,6 +1860,13 @@
   resolved "https://registry.npm.alibaba-inc.com/@types/source-list-map/download/@types/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
   integrity sha1-AHiDYGP/rxdBI0m7o2QIfgrALsk=
 
+"@types/speed-measure-webpack-plugin@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.npm.alibaba-inc.com/@types/speed-measure-webpack-plugin/download/@types/speed-measure-webpack-plugin-1.3.0.tgz#406a4ba9c087ecbad01266a3c9b206c7bb99bc24"
+  integrity sha1-QGpLqcCH7LrQEmajybIGx7uZvCQ=
+  dependencies:
+    "@types/webpack" "*"
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.npm.alibaba-inc.com/@types/stack-utils/download/@types/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -1937,19 +1944,7 @@
     "@types/source-list-map" "*"
     source-map "^0.6.1"
 
-"@types/webpack@*":
-  version "4.41.7"
-  resolved "https://registry.npm.alibaba-inc.com/@types/webpack/download/@types/webpack-4.41.7.tgz#22be27dbd4362b01c3954ca9b021dbc9328d9511"
-  integrity sha1-Ir4n29Q2KwHDlUypsCHbyTKNlRE=
-  dependencies:
-    "@types/anymatch" "*"
-    "@types/node" "*"
-    "@types/tapable" "*"
-    "@types/uglify-js" "*"
-    "@types/webpack-sources" "*"
-    source-map "^0.6.0"
-
-"@types/webpack@4.41.0":
+"@types/webpack@*", "@types/webpack@4.41.0":
   version "4.41.0"
   resolved "https://registry.npm.alibaba-inc.com/@types/webpack/download/@types/webpack-4.41.0.tgz#b813a044d8b0dec7dfcd7622fdbe327bde06eb9a"
   integrity sha1-uBOgRNiw3sffzXYi/b4ye94G65o=
@@ -12980,6 +12975,13 @@ spdy@^4.0.1:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+speed-measure-webpack-plugin@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.npm.alibaba-inc.com/speed-measure-webpack-plugin/download/speed-measure-webpack-plugin-1.3.3.tgz#6ff894fc83e8a6310dde3af863a0329cd79da4f5"
+  integrity sha1-b/iU/IPopjEN3jr4Y6AynNedpPU=
+  dependencies:
+    chalk "^2.0.1"
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.npm.alibaba-inc.com/split-string/download/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"