search

t2ym / i18n-element

I18N Base Element for Lit and Polymer
Other
9 stars 1 forks source link

[4.0] Remove dependency on Polymer library #63

Closed t2ym closed 5 years ago

t2ym commented 5 years ago

[4.0] Remove dependency on Polymer library

Links to BundlePhobia

Minified + gzip package size

i18n-element@4.0.0 for i18n.js

i18n-element@4.0.0-core for i18n-core.js

Gzipped Bundled i18n-core.js - 15.26 kB including lit-html

Bundler Minifier Compression Size Notes
polymer-build minify: true - 93.19 kB
polymer-build minify: true gzip 19.13 kB
rollup babel-preset-minify - 67.84 kB
rollup babel-preset-minify gzip 15.26 kB

Gzipped Bundled i18n.js - 18.82 kB including lit-html

Bundler Minifier Compression Size Notes
polymer-build minify: true - 116.66 kB
polymer-build minify: true gzip 23.67 kB
rollup babel-preset-minify - 83.24 kB
rollup babel-preset-minify gzip 18.82 kB
rollup rollup-plugin-babel-minify - 106.43 kB LIMITED
rollup rollup-plugin-terser - 82.44 kB BROKEN
webpack babel-minify-webpack-plugin - 173.58 kB TRIAL
webpack babel-minify-webpack-plugin gzip 33.48 kB TRIAL

Dependencies

i18n-element i18n-behavior Polymer lit-html
4.x 4.x 3.x (optional) 1.x
3.x 3.x 3.x (mandatory) 1.x
2.x 2.x 1.x-2.x -
- 1.x 1.x -

Notes

Status

Tasks

3.0.0 with dependency on Polymer Library

4.0.0 plan # 1 with no production dependency on Polymer Library

Roughly Estimated Tasks on Plan # 1

Design Issues on Plan # 1

t2ym commented 5 years ago

Log from npm run size with bundled-import-meta

i18n.js → test/build/i18n.bundled-not-usable-as-it-is.js...
i18n.js:
i18n-behavior - 105.34 KB (40.54%)
    i18n-controller.js - 82.14 KB (77.98%)
    i18n-attr-repo.js - 15.87 KB (15.07%)
    i18n-preference.js - 7.33 KB (6.95%)
lit-html - 43.51 KB (16.75%)
    lib/parts.js - 14.84 KB (34.10%)
    lib/template.js - 9.24 KB (21.23%)
    lib/template-instance.js - 4.07 KB (9.35%)
    lib/template-result.js - 3.42 KB (7.86%)
    lit-html.js - 2.52 KB (5.79%)
    lib/default-template-processor.js - 2.01 KB (4.61%)
    lib/template-factory.js - 1.9 KB (4.37%)
    lib/render.js - 1.78 KB (4.08%)
    lib/dom.js - 1.56 KB (3.58%)
    lib/directive.js - 1.37 KB (3.16%)
    lib/part.js - 834 B (1.87%)
make-plural - 32.86 KB (12.65%)
    es6/plurals.js - 32.86 KB (100.00%)
app - 25.29 KB (9.73%)
    i18n.js - 25.29 KB (100.00%)
i18n-format - 22.29 KB (8.58%)
    i18n-format.js - 22.29 KB (100.00%)
i18n-number - 10.98 KB (4.23%)
    i18n-number.js - 10.98 KB (100.00%)
wc-putty - 10.11 KB (3.89%)
    polyfill.js - 10.11 KB (100.00%)
deepcopy - 9.43 KB (3.63%)
    dist/deepcopy.js - 9.43 KB (100.00%)
┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   Destination: test/build/i18n.bundled-not-usable-as-it-is.js   │
│   Bundle Size:  107.7 KB                                        │
│   Minified Size:  82.53 KB                                      │
│   Gzipped Size:  18.56 KB                                       │
│   Brotli size: 18.98 KB                                         │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
(!) rollup-plugin-sizes plugin: The ongenerate hook used by plugin rollup-plugin-sizes is deprecated. The generateBundle hook should be used instead.
created test/build/i18n.bundled-not-usable-as-it-is.js in 3.3s

> gulp size

[22:34:54] Using gulpfile ~/WebComponents/components/i18n-element/gulpfile.js
[22:34:54] Starting 'size'...
[22:34:54] gulp-debug: test/build/i18n.js
[22:34:54] gulp-debug: 1 item
[22:34:54] all files 115.25 kB
[22:34:54] gulp-debug: test/build/i18n.js.gz
[22:34:54] gulp-debug: 1 item
[22:34:54] all files 23.32 kB
[22:34:54] Finished 'size' after 35 ms
t2ym commented 5 years ago

rollup.config.js for bundled-import-meta

import resolve from 'rollup-plugin-node-resolve';
import sizes from 'rollup-plugin-sizes';
import filesize from 'rollup-plugin-filesize';
import babel from 'rollup-plugin-babel';
import minifyPreset from 'babel-preset-minify';

export default {
  input: 'i18n.js',
  output: {
    file: 'test/build/i18n.bundled-not-usable-as-it-is.js',
    format: 'esm',
  },
  plugins: [
    resolve({
      modulesOnly: true,
    }),
    babel({
      sourceMaps: false,
      comments: false,
      plugins: [
        '@babel/plugin-syntax-object-rest-spread',
        '@babel/plugin-syntax-async-generators',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-syntax-import-meta',
        // rollup rewrites import.meta.url, but makes them point to the file location after bundling
        // we want the location before bundling
        [ 'bundled-import-meta', {
          'mappings': {
            'node_modules': '/node_modules'
          },
          'bundleDir': '.',
          'importStyle': 'esm',
        } ],
      ],
      presets: [
        minifyPreset({}, {
          // Options from polymer-build/src/js-transform.ts
          // Disable the minify-constant-folding plugin because it has a bug relating
          // to invalid substitution of constant values into export specifiers:
          // https://github.com/babel/minify/issues/820
          evaluate: false,

          // TODO(aomarks) Find out why we disabled this plugin.
          simplifyComparisons: false,

          // Prevent removal of things that babel thinks are unreachable, but sometimes
          // gets wrong: https://github.com/Polymer/tools/issues/724
          deadcode: false,

          // Disable the simplify plugin because it can eat some statements preceeding
          // loops. https://github.com/babel/minify/issues/824
          simplify: false,

          // This is breaking ES6 output. https://github.com/Polymer/tools/issues/261
          mangle: false,
        }),
      ],
    }),
    sizes({
      details: true,
    }),
    filesize({
      showBrotliSize: true,
    }),
  ]
}
t2ym commented 5 years ago

rollup.config.js for demo/preprocess/clock.js

deployed to build/esm-bundled/demo/preprocess/clock.js

Deployment

polymer build # set up build/esm-bundled/...
rollup -c # deploy build/esm-bundled/demo/preprocess/clock.js
cd build/esm-bundled
python -m SimpleHTTPServer 8081 # http://localhost:8081/demo/preprocess/

Verification

// On DevTools Console
customElements.get('world-clock').importMeta
{ url: 'http://localhost:8081/demo/preprocess/clock.js' }
customElements.get('i18n-format').importMeta
{ url: 'http://localhost:8081/node_modules/i18n-format/i18n-format.js' }

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import sizes from 'rollup-plugin-sizes';
import filesize from 'rollup-plugin-filesize';
import babel from 'rollup-plugin-babel';
import minifyPreset from 'babel-preset-minify';

export default {
  input: 'demo/preprocess/clock.js',
  output: {
    file: 'build/esm-bundled/demo/preprocess/clock.js',
    format: 'esm',
  },
  plugins: [
    resolve({
      modulesOnly: true,
    }),
    babel({
      sourceMaps: false,
      comments: false,
      plugins: [
        '@babel/plugin-syntax-object-rest-spread',
        '@babel/plugin-syntax-async-generators',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-syntax-import-meta',
        // rollup rewrites import.meta.url, but makes them point to the file location after bundling
        // we want the location before bundling
        [ 'bundled-import-meta', {
          'mappings': {
            'node_modules': '../../node_modules'
          },
          'bundleDir': 'demo/preprocess',
          'importStyle': 'esm',
        } ],
      ],
      presets: [
        minifyPreset({}, {
          // Options from polymer-build/src/js-transform.ts
          // Disable the minify-constant-folding plugin because it has a bug relating
          // to invalid substitution of constant values into export specifiers:
          // https://github.com/babel/minify/issues/820
          evaluate: false,

          // TODO(aomarks) Find out why we disabled this plugin.
          simplifyComparisons: false,

          // Prevent removal of things that babel thinks are unreachable, but sometimes
          // gets wrong: https://github.com/Polymer/tools/issues/724
          deadcode: false,

          // Disable the simplify plugin because it can eat some statements preceeding
          // loops. https://github.com/babel/minify/issues/824
          simplify: false,

          // This is breaking ES6 output. https://github.com/Polymer/tools/issues/261
          mangle: false,
        }),
      ],
    }),
    sizes({
      details: true,
    }),
    filesize({
      showBrotliSize: true,
    }),
  ]
}
t2ym commented 5 years ago

i18n-core.js part of log from npm run size

i18n-core.js → test/build/i18n-core.bundled-not-usable-as-it-is.js...
i18n-core.js:
i18n-behavior - 60.73 KB (29.08%)
    i18n-controller-core.js - 37.53 KB (61.80%)
    i18n-attr-repo.js - 15.87 KB (26.14%)
    i18n-preference.js - 7.33 KB (12.06%)
lit-html - 43.51 KB (20.83%)
    lib/parts.js - 14.84 KB (34.10%)
    lib/template.js - 9.24 KB (21.23%)
    lib/template-instance.js - 4.07 KB (9.35%)
    lib/template-result.js - 3.42 KB (7.86%)
    lit-html.js - 2.52 KB (5.79%)
    lib/default-template-processor.js - 2.01 KB (4.61%)
    lib/template-factory.js - 1.9 KB (4.37%)
    lib/render.js - 1.78 KB (4.08%)
    lib/dom.js - 1.56 KB (3.58%)
    lib/directive.js - 1.37 KB (3.16%)
    lib/part.js - 834 B (1.87%)
make-plural - 32.86 KB (15.73%)
    es6/plurals.js - 32.86 KB (100.00%)
i18n-format - 22.29 KB (10.67%)
    i18n-format.js - 22.29 KB (100.00%)
app - 18.95 KB (9.07%)
    i18n-core.js - 18.95 KB (100.00%)
i18n-number - 10.98 KB (5.26%)
    i18n-number.js - 10.98 KB (100.00%)
wc-putty - 10.11 KB (4.84%)
    polyfill.js - 10.11 KB (100.00%)
deepcopy - 9.43 KB (4.52%)
    dist/deepcopy.js - 9.43 KB (100.00%)