Use dynamic import() to load amcharts

tomwayson commented 5 years ago

Now that we're using ember-auto-import, which supports dynamic import() and others have successfully used dynamic import() with amcharts3, it may be theoretically possible to replace the logic in loadAmChartsFiles() with calls to dynamic import().

Allegedly.

tomwayson commented 5 years ago

Allegedly

tomwayson commented 3 years ago

at the very least we should be able to use import() for @esri/cedar itself, which should save people an additional whopping 6kB

tomwayson commented 3 years ago

I've done some initial testing around using import() for @esri/cedar and it kind of worked as expected. In a dev build vendor.js went from ~565k to ~550k and there was a new dynamically loaded ~15.6k chunk:

Before:

Production build output:

- dist/assets/vendor-31e3d5ff1d99a9e843b29f66b7f8fe39.js: 723 KB (199.63 KB gzipped)

After:

Production build output:

 - dist/assets/chunk.b44129ad962cdc7d5e75.js: 16.5 KB (5.84 KB gzipped)
 - dist/assets/vendor-22971f3af9bcc052a43ec91218732d55.js: 706.98 KB (194.58 KB gzipped)

tomwayson commented 3 years ago

After I noticed https://github.com/Esri/cedar/issues/487, I tried to force ember-auto-import to pull in the esm build of cedar w/ this configuration:

// index.js
module.exports = {
  name: 'ember-cli-cedar',

  options: {
    autoImport: {
      // for some reason I needed this alias as well as the webpack resolve.mainFields below
      alias: {
        '@esri/cedar': '@esri/cedar/dist/esm/index.js'
      },
      webpack: {
        resolve: {
          // until https://github.com/Esri/cedar/issues/487 is fixed
          mainFields: ['module'],
        }
      }
    },

That ended up being larger (137k in dev) by almost an order of magnitude than the UMD bundle with the inlined dependencies. It seems the bundle created by ember-auto-import and webpack is not being tree-shaken as it includes files like /@esri/arcgis-rest-feature-layer/dist/esm/add.js that are not used at all by cedar:

➜  ember-cli-cedar git:(c/dynamic-import) ✗ AUTO_IMPORT_VERBOSE=true ember s -p 4300
WARNING: Node v10.16.1 is not tested against Ember CLI on your platform. We recommend that you use the most-recent "Active LTS" version of Node.js. See https://git.io/v7S5n for details.
Hash: 2b50b3521a02b01a1254
Version: webpack 4.28.4
Time: 254ms
Built at: 04/01/2021 2:51:21 PM
                        Asset      Size  Chunks             Chunk Names
chunk.2d8515b535ae0f35b893.js  10.5 KiB     app  [emitted]  app
chunk.b625bc762fd5e1188d35.js  5.89 KiB   tests  [emitted]  tests
chunk.c1faaa8591624546eae5.js   137 KiB       0  [emitted]  
Entrypoint app = chunk.2d8515b535ae0f35b893.js
Entrypoint tests = chunk.b625bc762fd5e1188d35.js
[0] multi ./tmp/bundler-cache_path-on2DvuKx.tmp/staging/l.js ./tmp/bundler-cache_path-on2DvuKx.tmp/staging/app.js 40 bytes {app} [built]
[1] multi ./tmp/bundler-cache_path-on2DvuKx.tmp/staging/l.js ./tmp/bundler-cache_path-on2DvuKx.tmp/staging/tests.js 40 bytes {tests} [built]
[./node_modules/@esri/arcgis-rest-feature-layer/dist/esm/add.js] 1.22 KiB {0} [built]
[./node_modules/@esri/arcgis-rest-feature-layer/dist/esm/index.js] 456 bytes {0} [built]
[./node_modules/@esri/cedar-amcharts/dist/esm/index.js] 556 bytes {0} [built]
[./node_modules/@esri/cedar-amcharts/dist/esm/render/render.js] 9.54 KiB {0} [built]
[./node_modules/@esri/cedar/dist/esm/Chart.js] 4.54 KiB {0} [built]
[./node_modules/@esri/cedar/dist/esm/config.js] 75 bytes {0} [built]
[./node_modules/@esri/cedar/dist/esm/dataset.js] 4.38 KiB {0} [built]
[./node_modules/@esri/cedar/dist/esm/index.js] 170 bytes {0} [built]
[./node_modules/@esri/cedar/dist/esm/query/query.js] 2.44 KiB {0} [built]
[./node_modules/@esri/cedar/dist/esm/query/url.js] 1.44 KiB {0} [built]
[./tmp/bundler-cache_path-on2DvuKx.tmp/staging/app.js] 536 bytes {app} [built]
[./tmp/bundler-cache_path-on2DvuKx.tmp/staging/l.js] 50 bytes {app} {tests} [built]
[./tmp/bundler-cache_path-on2DvuKx.tmp/staging/tests.js] 388 bytes {tests} [built]

What's odd is that even more shows up in the file than is listed above, for example:

Esri / ember-cli-cedar

Use dynamic import() to load amcharts #112