Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

build size increased by 95KB gzipped compared to app.import() #208

Closed
jelhan opened this issue Apr 22, 2019 · 2 comments
Closed

build size increased by 95KB gzipped compared to app.import() #208

jelhan opened this issue Apr 22, 2019 · 2 comments

Comments

@jelhan
Copy link
Contributor

jelhan commented Apr 22, 2019

I noticed that build size is increased dramatically compared to app.import() if used to import sjcl.

A new ember project has a build size of 722.68 KB (190.55 KB gzipped) for vendor.js. Importing sjcl using app.import() increases the build size by 24,18 KB (8,46 KB gzipped). This matches with the size of node_modules/sjcl/sjcl.js (28 KB) and their docs:

The minified version of the library is under 6.4KB compressed, and yet it posts impressive speed results.

Using ember-auto-import instead of app.import() the build size is increased by ~300 KB (103,79 KB gzipped) to 1.02 MB (294.34 KB gzipped).

I don't see any hints in debug output:

$ DEBUG=ember-auto-import:* ember build --prod
Could not start watchman
Visit https://ember-cli.com/user-guide/#watchman for more info.
Environment: production
  ember-auto-import:analyzer updating imports for ember-auto-import-build-size/app.js, 375 +0ms
  ember-auto-import:analyzer updating imports for ember-auto-import-build-size/helpers/app-version.js, 898 +67ms
  ember-auto-import:analyzer updating imports for ember-auto-import-build-size/helpers/pluralize.js, 89 +7ms
  ember-auto-import:analyzer updating imports for ember-auto-import-build-size/helpers/singularize.js, 95 +1ms
  ember-auto-import:analyzer updating imports for ember-auto-import-build-size/initializers/app-version.js, 310 +0ms
  ember-auto-import:analyzer updating imports for ember-auto-import-build-size/initializers/container-debug-adapter.js, 371 +2ms
  ember-auto-import:analyzer updating imports for ember-auto-import-build-size/initializers/ember-data.js, 1383 +2ms
  ember-auto-import:analyzer updating imports for ember-auto-import-build-size/initializers/export-application-global.js, 1071 +3ms
  ember-auto-import:analyzer updating imports for ember-auto-import-build-size/instance-initializers/ember-data.js, 155 +13ms
  ember-auto-import:analyzer updating imports for ember-auto-import-build-size/resolver.js, 65 +2ms
  ember-auto-import:analyzer updating imports for ember-auto-import-build-size/router.js, 270 +1ms
  ember-auto-import:analyzer updating imports for ember-auto-import-build-size/services/ajax.js, 52 +2ms
  ember-auto-import:analyzer updating imports for ember-auto-import-build-size/templates/application.js, 281 +1ms
  ember-auto-import:analyzer imports [
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "@ember/application",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/app.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "./resolver",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/app.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "ember-load-initializers",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/app.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "./config/environment",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/app.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "@ember/component/helper",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/helpers/app-version.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "../config/environment",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/helpers/app-version.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "ember-cli-app-version/utils/regexp",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/helpers/app-version.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "ember-inflector/lib/helpers/pluralize",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/helpers/pluralize.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "ember-inflector/lib/helpers/singularize",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/helpers/singularize.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "ember-cli-app-version/initializer-factory",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/initializers/app-version.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "../config/environment",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/initializers/app-version.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "ember-resolver/resolvers/classic/container-debug-adapter",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/initializers/container-debug-adapter.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "ember-data/setup-container",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/initializers/ember-data.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "ember-data",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/initializers/ember-data.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "ember",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/initializers/export-application-global.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "../config/environment",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/initializers/export-application-global.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "ember-data/initialize-store-service",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/instance-initializers/ember-data.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "ember-resolver",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/resolver.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "sjcl",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/router.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "@ember/routing/router",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/router.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "./config/environment",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/router.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   },
  ember-auto-import:analyzer   {
  ember-auto-import:analyzer     "specifier": "ember-ajax/services/ajax",
  ember-auto-import:analyzer     "path": "ember-auto-import-build-size/services/ajax.js",
  ember-auto-import:analyzer     "isDynamic": false,
  ember-auto-import:analyzer     "package": "ember-auto-import-build-size"
  ember-auto-import:analyzer   }
  ember-auto-import:analyzer ] +147ms
  ember-auto-import:splitter bundleForPath("ember-auto-import-build-size/router.js")=app +0ms
  ember-auto-import:splitter output {
  "app": {
    "static": [
      {
        "specifier": "sjcl",
        "entrypoint": "/home/main/tmp/ember-auto-import-build-size/node_modules/sjcl/sjcl.js",
        "importedBy": [
          {
            "package": "ember-auto-import-build-size",
            "path": "ember-auto-import-build-size/router.js",
            "isDynamic": false
          }
        ]
      }
    ],
    "dynamic": []
  },
  "tests": {
    "static": [],
    "dynamic": []
  }
} +0ms
  ember-auto-import:bundler extraWebpackConfig {} +0ms
Hash: 52e55947024acf2994c1
Version: webpack 4.28.4
Time: 698ms
Built at: 2019-04-22 17:20:19
                        Asset      Size  Chunks                    Chunk Names
chunk.1f4167b8a69f222c9cd6.js   324 KiB       2  [emitted]  [big]  vendors~app
chunk.46af734564649a5ed608.js  1.95 KiB       0  [emitted]         app
chunk.6b61bd1ed8c4dfea15bb.js  1.28 KiB       1  [emitted]         tests
Entrypoint app [big] = chunk.1f4167b8a69f222c9cd6.js chunk.46af734564649a5ed608.js
Entrypoint tests = chunk.6b61bd1ed8c4dfea15bb.js
 [11] ./node_modules/randombytes/browser.js 1.54 KiB {2} [built]
 [13] ./node_modules/create-hash/browser.js 625 bytes {2} [built]
 [24] /tmp/broccoli-24989S3eP8OuS5t9W/cache-126-bundler/staging/l.js 50 bytes {0} {1} [built]
 [46] ./node_modules/create-hmac/browser.js 1.55 KiB {2} [built]
 [49] ./node_modules/pbkdf2/browser.js 83 bytes {2} [built]
 [73] multi /tmp/broccoli-24989S3eP8OuS5t9W/cache-126-bundler/staging/l.js /tmp/broccoli-24989S3eP8OuS5t9W/cache-126-bundler/staging/app.js 40 bytes {0} [built]
 [74] /tmp/broccoli-24989S3eP8OuS5t9W/cache-126-bundler/staging/app.js 512 bytes {0} [built]
 [75] ./node_modules/sjcl/sjcl.js 24.8 KiB {2} [built]
 [76] ./node_modules/crypto-browserify/index.js 2.87 KiB {2} [optional] [built]
 [95] ./node_modules/browserify-sign/algos.js 54 bytes {2} [built]
 [97] ./node_modules/browserify-cipher/browser.js 1.97 KiB {2} [built]
[114] ./node_modules/diffie-hellman/browser.js 1.11 KiB {2} [built]
[120] ./node_modules/browserify-sign/browser/index.js 2.12 KiB {2} [built]
[163] multi /tmp/broccoli-24989S3eP8OuS5t9W/cache-126-bundler/staging/l.js /tmp/broccoli-24989S3eP8OuS5t9W/cache-126-bundler/staging/tests.js 40 bytes {1} [built]
[164] /tmp/broccoli-24989S3eP8OuS5t9W/cache-126-bundler/staging/tests.js 388 bytes {1} [built]
    + 150 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  chunk.1f4167b8a69f222c9cd6.js (324 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (326 KiB)
      chunk.1f4167b8a69f222c9cd6.js
      chunk.46af734564649a5ed608.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
cleaning up...
Built project successfully. Stored in "dist/".
File sizes:
 - dist//assets/auto-import-fastboot-d41d8cd98f00b204e9800998ecf8427e.js: 0 B
 - dist//assets/ember-auto-import-build-size-1d89d761c223a82de20e495cde80d15e.js: 5.17 KB (1.39 KB gzipped)
 - dist//assets/ember-auto-import-build-size-d41d8cd98f00b204e9800998ecf8427e.css: 0 B
 - dist//assets/vendor-3db78aaf583c7144177357efe7a0f093.js: 1.02 MB (294.34 KB gzipped)
 - dist//assets/vendor-d41d8cd98f00b204e9800998ecf8427e.css: 0 B

Steps to reproduce:

ember new ember-auto-import-build-size
cd ember-auto-import-build-size/
# reference size
ember build --prod
yarn add --dev sjcl
sed -i "1s/^/import sjcl from 'sjcl';\n/" app/router.js
# import sjcl using app.import()
sed -i "22s/^/app.import('node_modules\/sjcl\/sjcl.js', { using: [{ transformation: 'amd', as: 'sjcl' }] });\n/" ember-cli-build.js
ember build --prod
# import sjcl using ember-auto-import
git checkout ember-cli-build.js
ember install ember-auto-import
ember build --prod
@jelhan jelhan mentioned this issue Apr 22, 2019
Merged
@ef4
Copy link
Collaborator

ef4 commented Apr 25, 2019

sjcl includes the line require('crypto'). That's an unambiguous request to try to use node's crypto library and webpack obliges by packaging up a portable version of said library. The sjcl maintainers closed the issue, which unfortunately punts the solution onto anyone who is consuming sjcl via webpack.

You can workaround with:

let app = new EmberApp(defaults, {
    autoImport: {
      webpack: {
        externals: { crypto: "null" },
      },
    },
  });

The right place to fix this is still upstream in sjcl, probably by having separate entrypoint for browesr vs node, and using the main and browser fields in package.json to distinguish them.

@ef4 ef4 closed this as completed Apr 25, 2019
@ef4
Copy link
Collaborator

ef4 commented Apr 25, 2019

As a meta point for any future readers: whenever some library is acting weird when used via ember-auto-import, search their issues for "webpack" and you'll almost always find out why. The ubiquity of webpack means that most of these bugs have been seen before (that is one reason I chose to build on top of webpack).

@jelhan jelhan mentioned this issue Apr 26, 2019
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ef4 @jelhan