re-open #186, fix #172

cmux · Nov 5, 2019 · 0187d32 · 0187d32
1 parent 7467991
commit 0187d32
Show file tree

Hide file tree

Showing 13 changed files with 103 additions and 65 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,9 +8,10 @@
     -   _Node.js_ 最低版本要求提升到 `8.12.0`
     -   [SSR & 客户端渲染] 组件 CSS 的 `<style>` 标签上不再有 `id` 属性，以避免和元素冲突
         -   如果项目中有用到根据 `id` 选择 `<style>` 标签的场景，可改为选择标签属性 `[data-koot-module]`
-    -   [服务器] 服务器端打包代码不再会对 `await` `async` 进行转译 ([#172](https://github.com/cmux/koot/issues/172), [#186](https://github.com/cmux/koot/issues/186))
 -   **新特性**
     -   **新工具函数** `koot/utils/client-get-styles` - 获取当前全局 CSS 和所有组件 CSS。具体用法请参见文档 [全局与工具函数/工具函数/客户端](https://koot.js.org/#/utilities?id=客户端) ([#185](https://github.com/cmux/koot/issues/185))
+-   优化
+    -   [服务器] 优化服务器代码的文件尺寸 ([#172](https://github.com/cmux/koot/issues/172))
 
 ## [0.11.15] - 2019-10-15
 

diff --git a/packages/koot-webpack/build.js b/packages/koot-webpack/build.js
@@ -8,6 +8,7 @@ const path = require('path');
 const chalk = require('chalk');
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
+const findCacheDir = require('find-cache-dir');
 
 const resetCssLoader = require('./loaders/css/reset');
 
@@ -211,6 +212,13 @@ module.exports = async (kootConfig = {}) => {
 
         // 服务器环境
         if (STAGE === 'server') {
+            // 清理缓存
+            fs.removeSync(
+                findCacheDir({
+                    name: 'koot-webpack-server'
+                })
+            );
+
             // 清理已有的打包结果
             fs.ensureDirSync(path.resolve(dist, `server`));
             fs.emptyDirSync(path.resolve(dist, `server`));

diff --git a/packages/koot-webpack/factory-config/module/rules/javascript.js b/packages/koot-webpack/factory-config/module/rules/javascript.js
@@ -1,5 +1,7 @@
 // const getDirDevCache = require('koot/libs/get-dir-dev-cache')
 
+const findCacheDir = require('find-cache-dir');
+
 /**
  * Loader 规则 - Javascript
  * @param {Object} options
@@ -8,12 +10,15 @@
 module.exports = (kootBuildConfig = {}) => {
     const env = process.env.WEBPACK_BUILD_ENV;
     const stage = process.env.WEBPACK_BUILD_STAGE;
+    const stageServer = stage === 'server';
 
     const { createDll = false } = kootBuildConfig;
 
     //
 
     const ruleUseBabelLoader = (options = {}) => {
+        options.__server = stageServer;
+
         if (typeof options.cacheDirectory === 'undefined')
             options.cacheDirectory = true;
 
@@ -28,6 +33,15 @@ module.exports = (kootBuildConfig = {}) => {
             options.cacheCompression = false;
         }
 
+        if (stageServer) {
+            options.cacheDirectory = findCacheDir({
+                name: 'koot-webpack-server'
+            });
+            options.cacheIdentifier = 'koot-webpack-server-bundling';
+            options.babelrc = false;
+            // options.cacheCompression = false;
+        }
+
         return {
             loader: require.resolve('../../../loaders/babel'),
             options

diff --git a/packages/koot-webpack/loaders/babel/index.js b/packages/koot-webpack/loaders/babel/index.js
@@ -10,11 +10,18 @@ module.exports = require('babel-loader').custom(babel => {
 
     return {
         // Passed the loader options.
-        customOptions({ __createDll, __react, __typescript, ...loader }) {
+        customOptions({
+            __createDll,
+            __react,
+            __typescript,
+            __server,
+            ...loader
+        }) {
             Object.assign(customOptions, {
                 __createDll,
                 __react,
-                __typescript
+                __typescript,
+                __server
             });
             // Pull out any custom options that the loader might have.
             return {
@@ -33,10 +40,12 @@ module.exports = require('babel-loader').custom(babel => {
             const {
                 __createDll,
                 __react,
-                __typescript = false
+                __typescript = false,
+                __server = false
             } = customOptions;
             const { presets, plugins, ...options } = cfg.options;
-            const stage = process.env.WEBPACK_BUILD_STAGE;
+            const isServer =
+                __server || process.env.WEBPACK_BUILD_STAGE === 'server';
             // console.log({ options });
 
             // presets ========================================================
@@ -70,25 +79,25 @@ module.exports = require('babel-loader').custom(babel => {
             //     }
             //     return preset
             // })
-            if (stage === 'server') {
-                newPresets.forEach((preset, index) => {
-                    if (
-                        typeof preset.file === 'object' &&
-                        /^@babel\/preset-env$/.test(preset.file.request)
-                    ) {
-                        const thisPreset = newPresets[index];
-                        if (typeof thisPreset.options !== 'object')
-                            thisPreset.options = {};
-                        thisPreset.options.modules = false;
-                        thisPreset.options.exclude = [
-                            '@babel/plugin-transform-regenerator',
-                            '@babel/plugin-transform-async-to-generator'
-                        ];
-                        thisPreset.options.ignoreBrowserslistConfig = true;
-                        // console.log(thisPreset);
-                    }
-                });
-            }
+            // if (isServer) {
+            //     newPresets.forEach((preset, index) => {
+            //         if (
+            //             typeof preset.file === 'object' &&
+            //             /^@babel\/preset-env$/.test(preset.file.request)
+            //         ) {
+            //             const thisPreset = newPresets[index];
+            //             if (typeof thisPreset.options !== 'object')
+            //                 thisPreset.options = {};
+            //             thisPreset.options.modules = false;
+            //             thisPreset.options.exclude = [
+            //                 '@babel/plugin-transform-regenerator',
+            //                 '@babel/plugin-transform-async-to-generator'
+            //             ];
+            //             thisPreset.options.ignoreBrowserslistConfig = true;
+            //             // console.log(thisPreset);
+            //         }
+            //     });
+            // }
 
             // plugins ========================================================
             const newPlugins = plugins.filter(plugin => {
@@ -101,14 +110,14 @@ module.exports = require('babel-loader').custom(babel => {
                 )
                     return false;
 
-                if (
-                    stage === 'server' &&
-                    typeof plugin.file === 'object' &&
-                    /@babel(\/|\\)plugin-transform-regenerator/.test(
-                        plugin.file.request
-                    )
-                )
-                    return false;
+                // if (
+                //     isServer &&
+                //     typeof plugin.file === 'object' &&
+                //     /@babel(\/|\\)plugin-transform-regenerator/.test(
+                //         plugin.file.request
+                //     )
+                // )
+                //     return false;
 
                 return true;
             });
@@ -145,12 +154,15 @@ module.exports = require('babel-loader').custom(babel => {
             // )
             // console.log('')
 
-            return {
+            const thisOptions = {
                 ...options,
                 // presets: presets,
                 presets: newPresets,
                 plugins: newPlugins
             };
+            // console.log(isServer);
+
+            return thisOptions;
         },
 
         result(result) {

diff --git a/packages/koot-webpack/package.json b/packages/koot-webpack/package.json
@@ -27,6 +27,7 @@
     },
     "dependencies": {
         "@types/webpack": "^4.39.8",
+        "babel-loader": "^8.0.6",
         "semver": "^6.3.0",
         "webpack": "^4.41.2",
         "webpack-bundle-analyzer": "^3.6.0",

diff --git a/packages/koot/ReactApp/server/index.js b/packages/koot/ReactApp/server/index.js
@@ -1,3 +1,4 @@
+import 'regenerator-runtime/runtime';
 import run from './run';
 
 export default run;
diff --git a/packages/koot/ReactApp/server/ssr.js b/packages/koot/ReactApp/server/ssr.js
@@ -5,6 +5,7 @@
     __KOOT_SSR__:false
 */
 
+import 'regenerator-runtime/runtime';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
 import match from 'react-router/lib/match';

diff --git a/packages/koot/ReactSPA/server/index.js b/packages/koot/ReactSPA/server/index.js
@@ -1,6 +1,8 @@
 /* eslint-disable no-console */
 
+import 'regenerator-runtime/runtime';
 // import { server as serverConfig } from '__KOOT_PROJECT_CONFIG_PORTION_SERVER_PATHNAME__';
+
 import createKoaApp from '../../libs/create-koa-app';
 import koaStaticDefaults from '../../defaults/koa-static';
 // import getDirDistPublic from '../../libs/get-dir-dist-public';

diff --git a/packages/koot/bin/_before.js b/packages/koot/bin/_before.js
@@ -1,6 +1,6 @@
-const fs = require('fs-extra')
+const fs = require('fs-extra');
 
-const getDirTemp = require('../libs/get-dir-tmp')
+const getDirTemp = require('../libs/get-dir-tmp');
 
 /**
  * 所有命令启动前
@@ -10,40 +10,42 @@ const getDirTemp = require('../libs/get-dir-tmp')
  * @void
  */
 module.exports = async (options = {}) => {
-
-    const {
-        kootDev = false,
-        args = []
-    } = options
-    const customArgs = {}
+    const { kootDev = false, args = [] } = options;
+    const customArgs = {};
 
     // 清理临时目录
-    if (!kootDev && typeof process.env.KOOT_PROJECT_CONFIG_FULL_PATHNAME !== 'string')
-        await fs.remove(getDirTemp())
+    if (
+        !kootDev &&
+        typeof process.env.KOOT_PROJECT_CONFIG_FULL_PATHNAME !== 'string'
+    )
+        await fs.remove(getDirTemp());
 
     // 定制环境变量
     {
-        const keys = []
+        const keys = [];
         args.forEach(arg => {
-            const segs = arg.split('=')
+            const segs = arg.split('=');
             // envs[segs.shift()] = segs.join('=')
-            const key = segs.shift()
-            const value = segs.join('=')
+            const key = segs.shift();
+            const value = segs.join('=');
             if (typeof process.env[key] !== 'undefined')
-                throw new Error(`Environment Variable "${key}" exists and cannot be set!`)
-            keys.push(key)
-            process.env[key] = value
-            customArgs[key] = value
-        })
+                throw new Error(
+                    `Environment Variable "${key}" exists and cannot be set!`
+                );
+            keys.push(key);
+            process.env[key] = value;
+            customArgs[key] = value;
+        });
 
         if (typeof process.env.KOOT_CUSTOM_ENV_KEYS === 'undefined') {
-            process.env.KOOT_CUSTOM_ENV_KEYS = JSON.stringify(keys)
+            process.env.KOOT_CUSTOM_ENV_KEYS = JSON.stringify(keys);
         } else {
-            const keysAll = JSON.parse(process.env.KOOT_CUSTOM_ENV_KEYS)
-                .concat(keys)
-            process.env.KOOT_CUSTOM_ENV_KEYS = JSON.stringify(keysAll)
+            const keysAll = JSON.parse(process.env.KOOT_CUSTOM_ENV_KEYS).concat(
+                keys
+            );
+            process.env.KOOT_CUSTOM_ENV_KEYS = JSON.stringify(keysAll);
         }
     }
 
-    return { customArgs }
-}
+    return { customArgs };
+};
diff --git a/packages/koot/bin/build.js b/packages/koot/bin/build.js
@@ -122,7 +122,7 @@ const run = async () => {
 
     // 如过没有提供 stage，自动相继打包 client 和 server
     await kootWebpackBuild({ ...kootConfig });
-    await sleep(100);
+    await sleep(500);
 
     if (!fromCommandStart) console.log('\n' + ''.padEnd(60, '=') + '\n');
     process.env.WEBPACK_BUILD_STAGE = 'server';

diff --git a/packages/koot/package.json b/packages/koot/package.json
@@ -65,8 +65,6 @@
         "@types/react-dom": "^16.9.3",
         "@types/react-redux": "^7.1.5",
         "@types/react-router": "^3.0.8",
-        "babel-loader": "^8.0.6",
-        "cache-loader": "^4.1.0",
         "chalk": "^2.4.2",
         "classlist-polyfill": "^1.2.0",
         "cli-spinners": "^2.2.0",

diff --git a/test/projects/simple/package.json b/test/projects/simple/package.json
@@ -69,8 +69,6 @@
         "@types/react-dom": "^16.9.3",
         "@types/react-redux": "^7.1.5",
         "@types/react-router": "^3.0.8",
-        "babel-loader": "^8.0.6",
-        "cache-loader": "^4.1.0",
         "chalk": "^2.4.2",
         "classlist-polyfill": "^1.2.0",
         "cli-spinners": "^2.2.0",
@@ -141,6 +139,7 @@
         "xmlify": "^1.1.0",
         "yargs": "^14.2.0",
         "@types/webpack": "^4.39.8",
+        "babel-loader": "^8.0.6",
         "semver": "^6.3.0",
         "webpack": "^4.41.2",
         "webpack-bundle-analyzer": "^3.6.0",

diff --git a/test/projects/standard/package.json b/test/projects/standard/package.json
@@ -84,8 +84,6 @@
         "@types/react-dom": "^16.9.3",
         "@types/react-redux": "^7.1.5",
         "@types/react-router": "^3.0.8",
-        "babel-loader": "^8.0.6",
-        "cache-loader": "^4.1.0",
         "chalk": "^2.4.2",
         "classlist-polyfill": "^1.2.0",
         "cli-spinners": "^2.2.0",
@@ -156,6 +154,7 @@
         "xmlify": "^1.1.0",
         "yargs": "^14.2.0",
         "@types/webpack": "^4.39.8",
+        "babel-loader": "^8.0.6",
         "semver": "^6.3.0",
         "webpack": "^4.41.2",
         "webpack-bundle-analyzer": "^3.6.0",