test Preact shrink build size 828 KB(before) to 704 KB(after)

Author: mydearxym

next.config.js

@@ -1,9 +1,26 @@
-exports.exportPathMap = () => ({
-  '/': { page: '/' },
-  '/home/i': { page: '/', query: { name: 'index' } },
-  '/home/feature': { page: '/', query: { name: 'feature' } },
-  '/home/theme': { page: '/', query: { name: 'theme' } },
-  '/home/i18n': { page: '/', query: { name: 'i18n' } },
-  '/home/example': { page: '/', query: { name: 'example' } },
-  '/shop': { page: '/shop' },
-})
+module.exports = {
+  exportPathMap: () => ({
+    '/': { page: '/' },
+    '/home/i': { page: '/', query: { name: 'index' } },
+    '/home/feature': { page: '/', query: { name: 'feature' } },
+    '/home/theme': { page: '/', query: { name: 'theme' } },
+    '/home/i18n': { page: '/', query: { name: 'i18n' } },
+    '/home/example': { page: '/', query: { name: 'example' } },
+    '/shop': { page: '/shop' },
+  }),
+
+  webpack: (config, { dev }) => {
+    // For the development version, we'll use React.
+    // Because, it supports react hot loading and so on.
+    if (dev) {
+      return config
+    }
+
+    config.resolve.alias = {
+      react: 'preact-compat/dist/preact-compat',
+      'react-dom': 'preact-compat/dist/preact-compat',
+    }
+
+    return config
+  },
+}

package.json

@@ -86,9 +86,12 @@
     "mobx": "3.2.2",
     "mobx-react": "^4.2.2",
     "mobx-state-tree": "^1.0.0",
+    "module-alias": "^2.0.1",
     "next": "3.2.2",
     "path-match": "^1.2.4",
     "polished": "^1.7.0",
+    "preact": "^8.2.5",
+    "preact-compat": "^3.17.0",
     "prop-types": "^15.5.10",
     "ramda": "^0.24.1",
     "react": "15.6.2",

server.js

@@ -13,6 +13,14 @@ const app = next({ dev })
 const handle = app.getRequestHandler()
 const route = pathMatch()
 
+const moduleAlias = require('module-alias')
+// For the development version, we'll use React.
+// Because, it support react hot loading and so on.
+if (!dev) {
+  moduleAlias.addAlias('react', 'preact-compat')
+  moduleAlias.addAlias('react-dom', 'preact-compat')
+}
+
 // const langMatch = route('/lang/:name')
 mobxReact.useStaticRendering(true)
 

yarn.lock

@@ -3003,6 +3003,12 @@ ignore@^3.3.3:
   version "3.3.5"
   resolved "http://r.cnpmjs.org/ignore/download/ignore-3.3.5.tgz#c4e715455f6073a8d7e5dae72d2fc9d71663dba6"
 
+immutability-helper@^2.1.2:
+  version "2.4.0"
+  resolved "http://r.cnpmjs.org/immutability-helper/download/immutability-helper-2.4.0.tgz#00d421e2957c17f0f0781475f05ffd837e73458d"
+  dependencies:
+    invariant "^2.2.0"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "http://r.cnpmjs.org/imurmurhash/download/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -4212,6 +4218,10 @@ mobx@3.2.2:
   version "3.2.2"
   resolved "http://r.cnpmjs.org/mobx/download/mobx-3.2.2.tgz#aa671459bededfd9880c948889a3f62bce09279c"
 
+module-alias@^2.0.1:
+  version "2.0.1"
+  resolved "http://r.cnpmjs.org/module-alias/download/module-alias-2.0.1.tgz#7562c0fe839f195ac809292624634ba7c453aecb"
+
 moment@^2.11.2:
   version "2.18.1"
   resolved "http://r.cnpmjs.org/moment/download/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
@@ -4870,6 +4880,30 @@ postcss-value-parser@^3.3.0:
   version "3.3.0"
   resolved "http://r.cnpmjs.org/postcss-value-parser/download/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
 
+preact-compat@^3.17.0:
+  version "3.17.0"
+  resolved "http://r.cnpmjs.org/preact-compat/download/preact-compat-3.17.0.tgz#528cfdfc301190c1a0f47567336be1f4be0266b3"
+  dependencies:
+    immutability-helper "^2.1.2"
+    preact-render-to-string "^3.6.0"
+    preact-transition-group "^1.1.0"
+    prop-types "^15.5.8"
+    standalone-react-addons-pure-render-mixin "^0.1.1"
+
+preact-render-to-string@^3.6.0:
+  version "3.6.3"
+  resolved "http://r.cnpmjs.org/preact-render-to-string/download/preact-render-to-string-3.6.3.tgz#481d0d5bdac9192d3347557437d5cd00aa312043"
+  dependencies:
+    pretty-format "^3.5.1"
+
+preact-transition-group@^1.1.0:
+  version "1.1.1"
+  resolved "http://r.cnpmjs.org/preact-transition-group/download/preact-transition-group-1.1.1.tgz#f0a49327ea515ece34ea2be864c4a7d29e5d6e10"
+
+preact@^8.2.5:
+  version "8.2.5"
+  resolved "http://r.cnpmjs.org/preact/download/preact-8.2.5.tgz#cbfa3962a8012768159f6d01d46f9c1eb3213c0a"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "http://r.cnpmjs.org/prelude-ls/download/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -4889,6 +4923,10 @@ pretty-format@^21.0.2:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+pretty-format@^3.5.1:
+  version "3.8.0"
+  resolved "http://r.cnpmjs.org/pretty-format/download/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
+
 private@^0.1.6, private@^0.1.7:
   version "0.1.7"
   resolved "http://r.cnpmjs.org/private/download/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"
@@ -4922,7 +4960,7 @@ prop-types-exact@^1.1.1:
     has "^1.0.1"
     object.assign "^4.0.4"
 
-prop-types@15.5.10, prop-types@^15.5.10, prop-types@^15.5.4:
+prop-types@15.5.10, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8:
   version "15.5.10"
   resolved "http://r.cnpmjs.org/prop-types/download/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
@@ -5620,6 +5658,10 @@ staged-git-files@0.0.4:
   version "0.0.4"
   resolved "http://r.cnpmjs.org/staged-git-files/download/staged-git-files-0.0.4.tgz#d797e1b551ca7a639dec0237dc6eb4bb9be17d35"
 
+standalone-react-addons-pure-render-mixin@^0.1.1:
+  version "0.1.1"
+  resolved "http://r.cnpmjs.org/standalone-react-addons-pure-render-mixin/download/standalone-react-addons-pure-render-mixin-0.1.1.tgz#3c7409f4c79c40de9ac72c616cf679a994f37551"
+
 "statuses@>= 1.2.1 < 2", "statuses@>= 1.3.1 < 2", statuses@~1.3.1:
   version "1.3.1"
   resolved "http://r.cnpmjs.org/statuses/download/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"