Performance optimizations and debug.

Dennis Miasoutov · Dennis Miasoutov · commit d5921b6067ad · 2019-12-30T23:04:13.000-05:00
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,44 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [    
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug: Basic Build",
+      "cwd": "${workspaceRoot}",
+      "runtimeArgs": ["-r", "ts-node/register"],
+      "program": "${workspaceRoot}/src/cli/index.ts",
+      "args": [
+        "build",
+        "./examples/basic"
+      ]
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug: Basic Serve",
+      "cwd": "${workspaceRoot}",
+      "runtimeArgs": ["-r", "ts-node/register"],
+      "program": "${workspaceRoot}/src/cli/index.ts",
+      "args": [
+        "serve",
+        "./examples/basic"
+      ]
+    }    ,
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug: Async Redux Serve",
+      "cwd": "${workspaceRoot}",
+      "runtimeArgs": ["-r", "ts-node/register"],
+      "program": "${workspaceRoot}/src/cli/index.ts",
+      "args": [
+        "serve",
+        "./examples/router-redux-async"
+      ]
+    }
+  ]
+}
diff --git a/app/client.tsx b/app/client.tsx
@@ -10,10 +10,3 @@ const context: Context = AppModule.createContext();
 const element = document.getElementById("app");
 
 ReactDOM.hydrate(<AppModule.App context={context} />, element);
-
-if (module.hot) {
-  module.hot.accept(["injected-flavor-module"], () => {
-    const newModule = require<typeof AppModule>("injected-flavor-module");
-    ReactDOM.hydrate(<newModule.App context={context} />, element);
-  });
-}
diff --git a/app/entry/index.dev.ts b/app/entry/index.dev.ts
@@ -0,0 +1,5 @@
+// @ts-ignore
+import * as AppModule from "injected-app-module";
+import { hot } from "react-hot-loader/root";
+
+export default hot(AppModule.App);
diff --git a/app/entry/index.prod.ts b/app/entry/index.prod.ts
@@ -0,0 +1,3 @@
+// @ts-nocheck
+import * as AppModule from "injected-app-module";
+export default AppModule.App;
diff --git a/app/flavors/basic/app.tsx b/app/flavors/basic/app.tsx
@@ -3,40 +3,13 @@ import { AppProps } from "../../common";
 import { HelmetWrapper } from "../../components";
 
 // @ts-ignore
-import * as AppModule from "injected-app-module";
-
-interface AppState {
-  injectedApp: React.ComponentType;
-}
+import InjectedApp from "injected-app-entry";
 
 export class App extends React.Component<AppProps> {
-  /**
-   *
-   */
-  // constructor(props: AppProps) {
-  //   super(props);
-
-  //   this.state = {
-  //     injectedApp: AppModule.App,
-  //   };
-  // }
-  // public componentDidMount() {
-  //   if (module.hot) {
-  //     console.log("setting up");
-  //     console.log(module.hot.data);
-  //     module.hot.accept(["injected-app-module"], () => {
-  //       const newModule = require<typeof AppModule>("injected-app-module");
-  //       this.setState({ injectedApp: newModule.App });
-  //       console.log("fire");
-  //     });
-  //     module.hot.accept();
-  //   }
-  // }
   public render(): React.ReactNode {
-    // const InjectedApp = this.state.injectedApp;
     return (
       <HelmetWrapper helmetContext={this.props.context.helmetContext}>
-        <AppModule.App />
+        <InjectedApp />
       </HelmetWrapper>
     );
   }
diff --git a/app/flavors/router-redux-async/render.tsx b/app/flavors/router-redux-async/render.tsx
@@ -18,12 +18,16 @@ export function render(callback: RenderCallback, props: RenderFuncProps): void {
     context.helmetContext = {}; // init helmet for ssr
     const app = <App context={context} />;
     let firstError: any = null;
+    const timeoutTimer = setTimeout(() => {
+      callback(new Error("Cannot complete prerendering withing 5 second"));
+    }, 5000);
     domainTaskRun(
       () => {
         domainTaskBaseUrl("http://localhost:5000");
         renderToString(app);
       },
       /* completion callback */ errorOrNothing => {
+        clearTimeout(timeoutTimer);
         if (firstError) {
           return;
         }
diff --git a/app/flavors/router-redux/app.tsx b/app/flavors/router-redux/app.tsx
@@ -5,15 +5,15 @@ import { AppProps } from "../../common";
 import { HelmetWrapper } from "../../components";
 
 // @ts-ignore
-import * as AppModule from "injected-app-module";
+import InjectedApp from "injected-app-entry";
 
 export class App extends React.Component<AppProps> {
   public render(): React.ReactNode {
     return (
       <HelmetWrapper helmetContext={this.props.context.helmetContext}>
         <Provider store={this.props.context.store}>
           <ConnectedRouter history={this.props.context.history}>
-            <AppModule.App />
+            <InjectedApp />
           </ConnectedRouter>
         </Provider>
       </HelmetWrapper>
diff --git a/app/server.ts b/app/server.ts
@@ -1,5 +1,3 @@
-import * as React from "react";
-import * as ReactDom from "react-dom/server";
 import * as Webpack from "webpack";
 import {
   RedirectResult,
@@ -15,6 +13,7 @@ interface ServerRenderStats {
 
 function serverRenderer(stats: ServerRenderStats) {
   return (req: any, res: any, next: any) => {
+    process.stdout.write(`Request ${req.url}\n`);
     if (req.url === "/") {
       const assets = res.locals.webpackStats.stats[0].toJson()
         .assetsByChunkName;
@@ -43,17 +42,4 @@ function serverRenderer(stats: ServerRenderStats) {
   };
 }
 
-const renderError = (error: Error) => {
-  return (
-    <html>
-      <head>
-        <title>Error</title>
-      </head>
-      <body>
-        <pre>{error.stack}</pre>
-      </body>
-    </html>
-  );
-};
-
 export default serverRenderer;
diff --git a/examples/basic/component.tsx b/examples/basic/component.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+
+import img from "./image.png";
+
+export class Component extends React.Component {
+  public render(): React.ReactNode {
+    return [
+      <img key="image" src={img} alt="test-image" />,
+      <span key="text">And happy new year!</span>,
+    ];
+  }
+}
diff --git a/examples/basic/index.tsx b/examples/basic/index.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import { Helmet } from "react-helmet-async";
+import { Component } from "./component";
 import "./index.scss";
 
-import img from "./image.png";
-
 export class App extends React.Component {
   public render(): JSX.Element {
     return (
@@ -12,7 +11,7 @@ export class App extends React.Component {
           <title>Home Page</title>
         </Helmet>
         Hello World
-        <img src={img} alt="test-image" />
+        <Component />
       </div>
     );
   }
diff --git a/examples/router-redux-async/store.ts b/examples/router-redux-async/store.ts
@@ -1,6 +1,5 @@
 import { RouterState } from "connected-react-router";
-import { addTask } from "domain-task";
-import fetch = require("isomorphic-fetch");
+import { addTask, fetch } from "domain-task";
 import * as Redux from "redux";
 import thunk from "redux-thunk";
 
@@ -36,10 +35,10 @@ export function fetchStarsAction() {
         .then(data =>
           setTimeout(() => {
             dispatch({
-              stars: data.stargazers_count,
+              stats: data.stargazers_count,
               type: "LOAD_STARS",
-            }),
-              resolve();
+            });
+            resolve();
           }, 2000),
         ),
     );
diff --git a/package.json b/package.json
@@ -20,8 +20,8 @@
     "wtb:serve": "ts-node src/cli serve ./examples/basic",
     "wtb:build-redux": "ts-node src/cli build ./examples/router-redux",
     "wtb:serve-redux": "ts-node src/cli serve ./examples/router-redux",
-    "wtb:build-async-redux": "ts-node src/cli build ./examples/router-redux-async",
-    "wtb:serve-async-redux": "ts-node src/cli serve ./examples/router-redux-async"
+    "wtb:build-redux-async": "ts-node src/cli build ./examples/router-redux-async",
+    "wtb:serve-redux-async": "ts-node src/cli serve ./examples/router-redux-async"
   },
   "keywords": [
     "webpack",
@@ -65,6 +65,7 @@
     "css-loader": "^3.3.2",
     "express": "^4.17.1",
     "file-loader": "^5.0.2",
+    "fork-ts-checker-webpack-plugin": "^3.1.1",
     "ignore-loader": "^0.1.2",
     "mini-css-extract-plugin": "^0.8.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
diff --git a/src/cli/commands/config.ts b/src/cli/commands/config.ts
@@ -24,7 +24,7 @@ export function createConfigs(dir: string): webpack.Configuration[] {
   const customSettingsLocation = path.join(appRoot, settingsFileName);
 
   const defaultTsConfigLocation = path.join(libRoot, "tsconfig.base.json");
-  const appTsConfigLocation = path.join(appRoot, "tsconfig.json");
+  const appTsConfigLocation = path.join(projectRoot, "tsconfig.json");
   const tsConfigLocation = fs.existsSync(appTsConfigLocation)
     ? appTsConfigLocation
     : defaultTsConfigLocation;
@@ -47,6 +47,10 @@ export function createConfigs(dir: string): webpack.Configuration[] {
   const clientEntryPoint = path.join(libAppRoot, "client");
   const serverEntryPoint = path.join(libAppRoot, "server");
   const ssrEntryPoint = path.join(libAppRoot, "ssr");
+  const appEntry = path.join(
+    libAppRoot,
+    `entry/index.${program.production ? "prod" : "dev"}.ts`,
+  );
 
   const devEntries = program.production
     ? []
@@ -103,6 +107,7 @@ export function createConfigs(dir: string): webpack.Configuration[] {
       break;
   }
 
+  inject(configs, "injected-app-entry", appEntry);
   inject(configs, "injected-app-module", appRoot);
   inject(configs, "injected-flavor-module", flavorModule);
 
diff --git a/src/cli/commands/serve.ts b/src/cli/commands/serve.ts
@@ -15,8 +15,9 @@ function serve(dir: string) {
   process.stdout.write("Starting the development server.\n");
 
   const devMiddlewareInstance = devMiddleware(compiler, {
-    reporter,
     serverSideRender: true,
+    stats: false,
+    writeToDisk: true,
   });
 
   app.use(devMiddlewareInstance);
@@ -31,12 +32,5 @@ function serve(dir: string) {
     }),
   );
 }
-let outputAssets = true;
-function reporter(middlewareOptions: any, options: any) {
-  if (options.state) {
-    printResults(null, options.stats, outputAssets);
-    outputAssets = false;
-  }
-}
 
 program.command("serve <dir>").action(serve);
diff --git a/src/cli/printResults.ts b/src/cli/printResults.ts
@@ -70,10 +70,20 @@ function printFiles(stats: webpack.Stats, name: string) {
   const out = stats.compilation.outputOptions.path;
   const target = stats.compilation.outputOptions.libraryTarget;
   process.stdout.write(`${name} (${target}):\n`);
-  for (const chunk of stats.compilation.chunks) {
-    for (const file of chunk.files) {
-      process.stdout.write(`  ${chalk.green.italic(path.join(out, file))}\n`);
-    }
+  const assets = Object.keys(stats.compilation.assets).filter(
+    _ => !_.endsWith("d.ts"),
+  );
+  for (const asset of assets) {
+    const webpackAsset: any = stats.compilation.assets[asset];
+    const size: number = webpackAsset.size
+      ? webpackAsset.size()
+      : webpackAsset.children
+      ? webpackAsset.children[0]._value.length
+      : webpackAsset._value.length;
+    const strSize = (size / 1024).toFixed(2);
+    process.stdout.write(
+      `  ${chalk.green.italic(path.join(out, asset))} (${strSize} Kb)\n`,
+    );
   }
   process.stdout.write("\n");
 }
diff --git a/src/config-builder/createServerConfig.ts b/src/config-builder/createServerConfig.ts
@@ -1,3 +1,4 @@
+import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
 import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
 import * as webpack from "webpack";
 import { serverRules } from "./rules";
@@ -9,7 +10,7 @@ export function createServerConfig(
   isProduction: boolean,
 ): webpack.Configuration {
   return {
-    devtool: "source-map",
+    devtool: isProduction ? "source-map" : "cheap-module-eval-source-map",
     entry,
     mode: isProduction ? "production" : "development",
     module: { rules: serverRules },
@@ -23,8 +24,15 @@ export function createServerConfig(
       filename: "[name].js",
       libraryTarget: "commonjs2",
       path: outputPath,
+      pathinfo: false,
       publicPath: "/",
     },
+    plugins: [
+      new ForkTsCheckerWebpackPlugin({
+        tsconfig: tsConfigLocation,
+        tslint: true,
+      }),
+    ],
     resolve: {
       alias: {},
       extensions: [".js", ".jsx", ".ts", ".tsx"],
diff --git a/src/config-builder/createWebConfig.ts b/src/config-builder/createWebConfig.ts
@@ -32,7 +32,7 @@ export function createWebConfig(
   }
 
   return {
-    devtool: isProd ? undefined : "source-map",
+    devtool: isProd ? undefined : "cheap-module-eval-source-map",
     entry,
     mode: isProd ? "production" : "development",
     module: { rules: clientRules(isProd) },
@@ -69,6 +69,7 @@ export function createWebConfig(
       library: "[name]",
       libraryTarget: "umd",
       path: outputPath,
+      pathinfo: false,
       publicPath: "/",
     },
     plugins,
diff --git a/src/config-builder/rules/typescript.ts b/src/config-builder/rules/typescript.ts
@@ -3,6 +3,11 @@ export const typescript: webpack.Rule = {
   test: /\.(ts|tsx)?$/,
   use: {
     loader: "ts-loader",
-    options: { onlyCompileBundledFiles: true, allowTsInNodeModules: true },
+    options: {
+      allowTsInNodeModules: true,
+      experimentalWatchApi: true,
+      onlyCompileBundledFiles: true,
+      transpileOnly: true,
+    },
   },
 };
diff --git a/tsconfig.base.json b/tsconfig.base.json
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/tslint.json b/tslint.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+// @ts-nocheck`
	`2`	`+import * as AppModule from "injected-app-module";`
	`3`	`+export default AppModule.App;`