Don't bundle prop-types to then tree shake it #9944

timneutkens · 2020-01-04T12:49:34Z

When using next/link prop-types was bundled and then probably removed through terser, however this means Terser first has to parse it even though we know it's dead code. This optimizes a bit to just shake it earlier on.

ijjk · 2020-01-04T12:56:49Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
buildDuration	13.5s	13.7s	⚠️ +230ms
nodeModulesSize	48.9 MB	48.9 MB	⚠️ +50 B

Client Bundles (main, webpack, commons) Overall decrease ✓

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
main-HASH.js gzip	6.45 kB	6.45 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
4952ddcd88e7..54d3.js gzip	4.68 kB	4.68 kB	✓
commons.HASH.js gzip	4.06 kB	4.06 kB	✓
de003c3a9d30..6ef5.js gzip	13.8 kB	13.8 kB	✓
framework.HASH.js gzip	39.5 kB	39.1 kB	-311 B
Overall change	69.2 kB	68.9 kB	-311 B

Client Bundles (main, webpack, commons) Modern Overall decrease ✓

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
main-HASH.module.js gzip	5.43 kB	5.43 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
4952ddcd88e7..dule.js gzip	5.56 kB	5.56 kB	✓
de003c3a9d30..dule.js gzip	12.6 kB	12.6 kB	✓
framework.HA..dule.js gzip	39.4 kB	39.1 kB	-310 B
Overall change	63.7 kB	63.4 kB	-310 B

Legacy Client Bundles (polyfills)

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
polyfills-HASH.js gzip	4.76 kB	4.76 kB	✓
Overall change	4.76 kB	4.76 kB	✓

Client Pages Overall decrease ✓

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
_app.js gzip	1.33 kB	1.33 kB	✓
_error.js gzip	4.07 kB	4.07 kB	✓
hooks.js gzip	779 B	779 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.93 kB	2.91 kB	-20 B
routerDirect.js gzip	283 B	283 B	✓
withRouter.js gzip	282 B	282 B	✓
Overall change	9.89 kB	9.88 kB	-20 B

Client Pages Modern Overall decrease ✓

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
_app.module.js gzip	757 B	757 B	✓
_error.module.js gzip	3.06 kB	3.06 kB	✓
hooks.module.js gzip	371 B	371 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	2.49 kB	2.48 kB	-16 B
routerDirect..dule.js gzip	273 B	273 B	✓
withRouter.m..dule.js gzip	272 B	272 B	✓
Overall change	7.43 kB	7.42 kB	-16 B

Client Build Manifests

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes Overall decrease ✓

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
index.html gzip	1.04 kB	1.03 kB	-5 B
link.html gzip	1.04 kB	1.04 kB	-1 B
withRouter.html gzip	1.03 kB	1.03 kB	-1 B
Overall change	3.12 kB	3.11 kB	-7 B

Diffs

Diff for link.js

@@ -445,8 +445,6 @@
 
       var _react = _interopRequireWildcard(__webpack_require__('q1tI'))
 
-      var _propTypes = _interopRequireDefault(__webpack_require__('17x9'))
-
       var _router = _interopRequireDefault(__webpack_require__('nOHt'))
 
       var _rewriteUrlForExport = __webpack_require__('P5f7')
@@ -765,10 +763,8 @@
           return Link
         })(_react.Component)
 
-      Link.propTypes = void 0
-
       if (false) {
-        var exact, warn
+        var exact, PropTypes, warn
       }
 
       var _default = Link

Diff for link.module.js

@@ -320,8 +320,6 @@
 
       var _react = _interopRequireWildcard(__webpack_require__('q1tI'))
 
-      var _propTypes = _interopRequireDefault(__webpack_require__('17x9'))
-
       var _router = _interopRequireDefault(__webpack_require__('nOHt'))
 
       var _rewriteUrlForExport = __webpack_require__('P5f7')
@@ -579,10 +577,8 @@
         }
       }
 
-      Link.propTypes = void 0
-
       if (false) {
-        var exact, warn
+        var exact, PropTypes, warn
       }
 
       var _default = Link

Diff for framework.HASH.js

@@ -432,100 +432,6 @@
       /***/
     },
 
-    /***/ '16Al': /***/ function(module, exports, __webpack_require__) {
-      'use strict'
-      /**
-       * Copyright (c) 2013-present, Facebook, Inc.
-       *
-       * This source code is licensed under the MIT license found in the
-       * LICENSE file in the root directory of this source tree.
-       */
-
-      var ReactPropTypesSecret = __webpack_require__('WbBG')
-
-      function emptyFunction() {}
-      function emptyFunctionWithReset() {}
-      emptyFunctionWithReset.resetWarningCache = emptyFunction
-
-      module.exports = function() {
-        function shim(
-          props,
-          propName,
-          componentName,
-          location,
-          propFullName,
-          secret
-        ) {
-          if (secret === ReactPropTypesSecret) {
-            // It is still safe when called from React.
-            return
-          }
-          var err = new Error(
-            'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
-              'Use PropTypes.checkPropTypes() to call them. ' +
-              'Read more at http://fb.me/use-check-prop-types'
-          )
-          err.name = 'Invariant Violation'
-          throw err
-        }
-        shim.isRequired = shim
-        function getShim() {
-          return shim
-        }
-        // Important!
-        // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
-        var ReactPropTypes = {
-          array: shim,
-          bool: shim,
-          func: shim,
-          number: shim,
-          object: shim,
-          string: shim,
-          symbol: shim,
-
-          any: shim,
-          arrayOf: getShim,
-          element: shim,
-          elementType: shim,
-          instanceOf: getShim,
-          node: shim,
-          objectOf: getShim,
-          oneOf: getShim,
-          oneOfType: getShim,
-          shape: getShim,
-          exact: getShim,
-
-          checkPropTypes: emptyFunctionWithReset,
-          resetWarningCache: emptyFunction,
-        }
-
-        ReactPropTypes.PropTypes = ReactPropTypes
-
-        return ReactPropTypes
-      }
-
-      /***/
-    },
-
-    /***/ '17x9': /***/ function(module, exports, __webpack_require__) {
-      /**
-       * Copyright (c) 2013-present, Facebook, Inc.
-       *
-       * This source code is licensed under the MIT license found in the
-       * LICENSE file in the root directory of this source tree.
-       */
-
-      if (false) {
-        var throwOnDirectAccess, ReactIs
-      } else {
-        // By explicitly using `prop-types` you are opting into new production behavior.
-        // http://fb.me/prop-types-in-prod
-        module.exports = __webpack_require__('16Al')()
-      }
-
-      /***/
-    },
-
     /***/ QCnb: /***/ function(module, exports, __webpack_require__) {
       'use strict'
 
@@ -537,22 +443,6 @@
       /***/
     },
 
-    /***/ WbBG: /***/ function(module, exports, __webpack_require__) {
-      'use strict'
-      /**
-       * Copyright (c) 2013-present, Facebook, Inc.
-       *
-       * This source code is licensed under the MIT license found in the
-       * LICENSE file in the root directory of this source tree.
-       */
-
-      var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'
-
-      module.exports = ReactPropTypesSecret
-
-      /***/
-    },
-
     /***/ i8i4: /***/ function(module, exports, __webpack_require__) {
       'use strict'

Diff for framework.HASH.module.js

@@ -432,100 +432,6 @@
       /***/
     },
 
-    /***/ '16Al': /***/ function(module, exports, __webpack_require__) {
-      'use strict'
-      /**
-       * Copyright (c) 2013-present, Facebook, Inc.
-       *
-       * This source code is licensed under the MIT license found in the
-       * LICENSE file in the root directory of this source tree.
-       */
-
-      var ReactPropTypesSecret = __webpack_require__('WbBG')
-
-      function emptyFunction() {}
-      function emptyFunctionWithReset() {}
-      emptyFunctionWithReset.resetWarningCache = emptyFunction
-
-      module.exports = function() {
-        function shim(
-          props,
-          propName,
-          componentName,
-          location,
-          propFullName,
-          secret
-        ) {
-          if (secret === ReactPropTypesSecret) {
-            // It is still safe when called from React.
-            return
-          }
-          var err = new Error(
-            'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
-              'Use PropTypes.checkPropTypes() to call them. ' +
-              'Read more at http://fb.me/use-check-prop-types'
-          )
-          err.name = 'Invariant Violation'
-          throw err
-        }
-        shim.isRequired = shim
-        function getShim() {
-          return shim
-        }
-        // Important!
-        // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
-        var ReactPropTypes = {
-          array: shim,
-          bool: shim,
-          func: shim,
-          number: shim,
-          object: shim,
-          string: shim,
-          symbol: shim,
-
-          any: shim,
-          arrayOf: getShim,
-          element: shim,
-          elementType: shim,
-          instanceOf: getShim,
-          node: shim,
-          objectOf: getShim,
-          oneOf: getShim,
-          oneOfType: getShim,
-          shape: getShim,
-          exact: getShim,
-
-          checkPropTypes: emptyFunctionWithReset,
-          resetWarningCache: emptyFunction,
-        }
-
-        ReactPropTypes.PropTypes = ReactPropTypes
-
-        return ReactPropTypes
-      }
-
-      /***/
-    },
-
-    /***/ '17x9': /***/ function(module, exports, __webpack_require__) {
-      /**
-       * Copyright (c) 2013-present, Facebook, Inc.
-       *
-       * This source code is licensed under the MIT license found in the
-       * LICENSE file in the root directory of this source tree.
-       */
-
-      if (false) {
-        var throwOnDirectAccess, ReactIs
-      } else {
-        // By explicitly using `prop-types` you are opting into new production behavior.
-        // http://fb.me/prop-types-in-prod
-        module.exports = __webpack_require__('16Al')()
-      }
-
-      /***/
-    },
-
     /***/ QCnb: /***/ function(module, exports, __webpack_require__) {
       'use strict'
 
@@ -537,22 +443,6 @@
       /***/
     },
 
-    /***/ WbBG: /***/ function(module, exports, __webpack_require__) {
-      'use strict'
-      /**
-       * Copyright (c) 2013-present, Facebook, Inc.
-       *
-       * This source code is licensed under the MIT license found in the
-       * LICENSE file in the root directory of this source tree.
-       */
-
-      var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'
-
-      module.exports = ReactPropTypesSecret
-
-      /***/
-    },
-
     /***/ i8i4: /***/ function(module, exports, __webpack_require__) {
       'use strict'

Diff for index.html

@@ -27,7 +27,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/framework.9c9aa574c484a7d0240e.module.js"
+      href="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -121,13 +121,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/chunks/framework.4c64484d8a631a55b435.js"
+      src="/_next/static/chunks/framework.c07ba8a3b0945b0f6315.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/chunks/framework.9c9aa574c484a7d0240e.module.js"
+      src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Diff for link.html

@@ -27,7 +27,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/framework.9c9aa574c484a7d0240e.module.js"
+      href="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -126,13 +126,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/chunks/framework.4c64484d8a631a55b435.js"
+      src="/_next/static/chunks/framework.c07ba8a3b0945b0f6315.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/chunks/framework.9c9aa574c484a7d0240e.module.js"
+      src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Diff for withRouter.html

@@ -27,7 +27,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/framework.9c9aa574c484a7d0240e.module.js"
+      href="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -121,13 +121,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/chunks/framework.4c64484d8a631a55b435.js"
+      src="/_next/static/chunks/framework.c07ba8a3b0945b0f6315.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/chunks/framework.9c9aa574c484a7d0240e.module.js"
+      src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Serverless Mode (Decrease detected ✓)

General Overall increase ⚠️

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
buildDuration	13.8s	13.9s	⚠️ +58ms
nodeModulesSize	48.9 MB	48.9 MB	⚠️ +50 B

Client Bundles (main, webpack, commons) Overall decrease ✓

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
main-HASH.js gzip	6.45 kB	6.45 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
4952ddcd88e7..54d3.js gzip	4.68 kB	4.68 kB	✓
commons.HASH.js gzip	4.06 kB	4.06 kB	✓
de003c3a9d30..6ef5.js gzip	13.8 kB	13.8 kB	✓
framework.HASH.js gzip	39.5 kB	39.1 kB	-311 B
Overall change	69.2 kB	68.9 kB	-311 B

Client Bundles (main, webpack, commons) Modern Overall decrease ✓

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
main-HASH.module.js gzip	5.43 kB	5.43 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
4952ddcd88e7..dule.js gzip	5.56 kB	5.56 kB	✓
de003c3a9d30..dule.js gzip	12.6 kB	12.6 kB	✓
framework.HA..dule.js gzip	39.4 kB	39.1 kB	-310 B
Overall change	63.7 kB	63.4 kB	-310 B

Legacy Client Bundles (polyfills)

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
polyfills-HASH.js gzip	4.76 kB	4.76 kB	✓
Overall change	4.76 kB	4.76 kB	✓

Client Pages Overall decrease ✓

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
_app.js gzip	1.33 kB	1.33 kB	✓
_error.js gzip	4.07 kB	4.07 kB	✓
hooks.js gzip	779 B	779 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.93 kB	2.91 kB	-20 B
routerDirect.js gzip	283 B	283 B	✓
withRouter.js gzip	282 B	282 B	✓
Overall change	9.89 kB	9.88 kB	-20 B

Client Pages Modern Overall decrease ✓

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
_app.module.js gzip	757 B	757 B	✓
_error.module.js gzip	3.06 kB	3.06 kB	✓
hooks.module.js gzip	371 B	371 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	2.49 kB	2.48 kB	-16 B
routerDirect..dule.js gzip	273 B	273 B	✓
withRouter.m..dule.js gzip	272 B	272 B	✓
Overall change	7.43 kB	7.42 kB	-16 B

Client Build Manifests

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles Overall decrease ✓

	zeit/next.js canary	timneutkens/next.js fix/remove-proptypes-from-bundle	Change
_error.js gzip	78.9 kB	78.9 kB	⚠️ +3 B
hooks.html gzip	1.07 kB	1.07 kB	-2 B
index.js gzip	79.1 kB	79.1 kB	⚠️ +3 B
link.js gzip	81.3 kB	81.3 kB	-11 B
routerDirect.js gzip	79.2 kB	79.2 kB	⚠️ +2 B
withRouter.js gzip	79.3 kB	79.3 kB	⚠️ +2 B
Overall change	399 kB	399 kB	-3 B

Commit: c10bee9

Don't bundle prop-types to then tree shake it

c10bee9

timneutkens requested review from ijjk, lfades and Timer as code owners January 4, 2020 12:49

timneutkens merged commit 8898b85 into vercel:canary Jan 4, 2020

timneutkens deleted the fix/remove-proptypes-from-bundle branch January 4, 2020 13:12

snyk-bot mentioned this pull request Feb 11, 2020

[Snyk] Upgrade next from 9.1.5 to 9.2.0 ndom91/newtelco-next-maintenance-mgmt#16

Merged

vercel locked as resolved and limited conversation to collaborators Jan 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Don't bundle prop-types to then tree shake it #9944

Don't bundle prop-types to then tree shake it #9944

timneutkens commented Jan 4, 2020

ijjk commented Jan 4, 2020

Diffs

Don't bundle prop-types to then tree shake it #9944

Don't bundle prop-types to then tree shake it #9944

Conversation

timneutkens commented Jan 4, 2020

ijjk commented Jan 4, 2020

Stats from current PR

Diffs