Code Monkey home page Code Monkey logo

Comments (14)

ai avatar ai commented on July 24, 2024

Hi. I think Size Limit supports it out of box.

Show your Size Limit version and be config.

from size-limit.

jantimon avatar jantimon commented on July 24, 2024

It's the size-limit version 0.21.0 (newest)

my code:

function crossBrowserFetch(url: string, init?: RequestInit): Promise<Response> {
	if (typeof fetch === 'undefined') {
		// Lazy load ponyfill if necessary
		return import(/* webpackChunkName: "lazy-fetch-ponyfill" */ 'fetch-ponyfill' as any).then(
			(fetchPonyfill) => fetchPonyfill.default().fetch(url, init) as Response
		);
	}
	return fetch(url, init);
}

Default configuration

With the default configuration it does not exclude lazy loaded scripts

"size-limit": [
    {
      "path": "index.js",
      "limit": "1.5 KB"
    }
  ]

Result:

Package size limit has exceeded by 113 B
Package size: 1.61 KB
Size limit:   1.5 KB

Explicitly ignored

If I ignore the package explicitly it seems to work.

"size-limit": [
    {
      "path": "src/index.js",
      "limit": "1.5 KB",
      "ignore": [
        "fetch-ponyfill"
      ]
    }
  ]

Result

Package size: 1.29 KB
Size limit:   1.5 KB
With all dependencies, minified and gzipped

from size-limit.

ai avatar ai commented on July 24, 2024

Hm. Can you show your webpack config?

from size-limit.

jantimon avatar jantimon commented on July 24, 2024

I don't have any webpack config.
The code is transpiled using tsc before it is tested with size-limit.

The code after transpiling which is is given to size-limit is the following:

/**
 * Small helper to lazy load the fech library if missing (IE11)
 */
function crossBrowserFetch(url, init) {
    if (typeof fetch === 'undefined') {
        // Lazy load ponyfill if necessary
        return import(/* webpackChunkName: "request-registry-fetch-ponyfill" */ 'fetch-ponyfill').then(function (fetchPonyfill) { return fetchPonyfill.default().fetch(url, init); });
    }
    return fetch(url, init);
}

from size-limit.

ai avatar ai commented on July 24, 2024

Is it a JS library (so you will deliver it to users by npm) or an application?

from size-limit.

jantimon avatar jantimon commented on July 24, 2024

A library just image it would only be this code:

index.js

/**
 * Small helper to lazy load the fech library if missing (IE11)
 */
module.exports = function crossBrowserFetch(url, init) {
    if (typeof fetch === 'undefined') {
        // Lazy load ponyfill if necessary
        return import(/* webpackChunkName: "request-registry-fetch-ponyfill" */ 'fetch-ponyfill').then(function (fetchPonyfill) { return fetchPonyfill.default().fetch(url, init); });
    }
    return fetch(url, init);
}

from size-limit.

ai avatar ai commented on July 24, 2024

Can you debug here https://github.com/ai/size-limit/blob/master/index.js#L155

What will be in assets variable

from size-limit.

jantimon avatar jantimon commented on July 24, 2024

It looks like everything is correct.

The result of compiling the file above is:

!function(e) {
    function t(t) {
        for (var n, o, u = t[0], i = t[1], c = 0, a = []; c < u.length; c++) o = u[c], r[o] && a.push(r[o][0]), r[o] = 0;
        for (n in i) Object.prototype.hasOwnProperty.call(i, n) && (e[n] = i[n]);
        for (f && f(t); a.length;) a.shift()()
    }
    var n = {},
        r = {
            0: 0
        };

    function o(t) {
        if (n[t]) return n[t].exports;
        var r = n[t] = {
            i: t,
            l: !1,
            exports: {}
        };
        return e[t].call(r.exports, r, r.exports, o), r.l = !0, r.exports
    }
    o.e = function(e) {
        var t = [],
            n = r[e];
        if (0 !== n)
            if (n) t.push(n[2]);
            else {
                var u = new Promise(function(t, o) {
                    n = r[e] = [t, o]
                });
                t.push(n[2] = u);
                var i, c = document.getElementsByTagName("head")[0],
                    f = document.createElement("script");
                f.charset = "utf-8", f.timeout = 120, o.nc && f.setAttribute("nonce", o.nc), f.src = function(e) {
                    return o.p + "" + e + ".demo.js"
                }(e), i = function(t) {
                    f.onerror = f.onload = null, clearTimeout(a);
                    var n = r[e];
                    if (0 !== n) {
                        if (n) {
                            var o = t && ("load" === t.type ? "missing" : t.type),
                                u = t && t.target && t.target.src,
                                i = new Error("Loading chunk " + e + " failed.\n(" + o + ": " + u + ")");
                            i.type = o, i.request = u, n[1](i)
                        }
                        r[e] = void 0
                    }
                };
                var a = setTimeout(function() {
                    i({
                        type: "timeout",
                        target: f
                    })
                }, 12e4);
                f.onerror = f.onload = i, c.appendChild(f)
            } return Promise.all(t)
    }, o.m = e, o.c = n, o.d = function(e, t, n) {
        o.o(e, t) || Object.defineProperty(e, t, {
            enumerable: !0,
            get: n
        })
    }, o.r = function(e) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
            value: "Module"
        }), Object.defineProperty(e, "__esModule", {
            value: !0
        })
    }, o.t = function(e, t) {
        if (1 & t && (e = o(e)), 8 & t) return e;
        if (4 & t && "object" == typeof e && e && e.__esModule) return e;
        var n = Object.create(null);
        if (o.r(n), Object.defineProperty(n, "default", {
                enumerable: !0,
                value: e
            }), 2 & t && "string" != typeof e)
            for (var r in e) o.d(n, r, function(t) {
                return e[t]
            }.bind(null, r));
        return n
    }, o.n = function(e) {
        var t = e && e.__esModule ? function() {
            return e.default
        } : function() {
            return e
        };
        return o.d(t, "a", t), t
    }, o.o = function(e, t) {
        return Object.prototype.hasOwnProperty.call(e, t)
    }, o.p = "", o.oe = function(e) {
        throw console.error(e), e
    };
    var u = window.webpackJsonp = window.webpackJsonp || [],
        i = u.push.bind(u);
    u.push = t, u = u.slice();
    for (var c = 0; c < u.length; c++) t(u[c]);
    var f = i;
    o(o.s = 0)
}([function(e, t, n) {
    e.exports = n(1)
}, function(e, t, n) {
    e.exports = function(e, t) {
        return "undefined" == typeof fetch ? n.e(1).then(n.t.bind(null, 2, 7)).then(function(n) {
            return n.default().fetch(e, t)
        }) : fetch(e, t)
    }
}]);

So the main code is the webpack load code from here:

https://github.com/webpack/webpack/blob/9b97f3aeb124776731b9830c4964f496a3cdfed8/lib/web/JsonpMainTemplatePlugin.js#L149-L203

from size-limit.

ai avatar ai commented on July 24, 2024

I need a list of assets. Did webpack created a separated file for dynamic import.

from size-limit.

jantimon avatar jantimon commented on July 24, 2024
console.log(assets)
-> 
[ 'demo.js' ]
 console.log(stat.assetsByChunkName)
->
 { 
  main: 'demo.js',
  'request-registry-fetch-ponyfill': '1.demo.js' 
}

from size-limit.

jantimon avatar jantimon commented on July 24, 2024

My confusion was because of the large size but it is the webpack code which is added to the code.

from size-limit.

ai avatar ai commented on July 24, 2024

Seems like assets is correct and it should count only demo.js size.

Do you have a project to repeat the error. I afraid that webpack just do not move polyfill to that file.

from size-limit.

jantimon avatar jantimon commented on July 24, 2024

Sure - but I guess your tool is delivering the "correct" result unfortunately it counts also the size of the webpack dynamic module loader.
So even with only 1 line of code you start with a quite high number.

I attached a demo project: size-limit-demo.zip
Just run npm i && npm run size

You will see that the index.js file (431 bytes without gzip without minifcation) will show the following result:

Package size: 597 B
With all dependencies, minified and gzipped

Especially for such a small library (4 lines of code) that's a quite huge number

from size-limit.

ai avatar ai commented on July 24, 2024

unfortunately it counts also the size of the webpack dynamic module loader.

Yeap, it is by design. Your user may not have dynamic import() in their bundle and your library cost (for them) will include dynamic module loader.

So even with only 1 line of code you start with a quite high number.

Yeap, Size Limit was specially designed to detect this case.

Here is another example when Size Limit helped to decrease library real cost by one LOC theKashey/react-focus-lock#48

Here is what I suggest or your case:

  1. Do not use fetch() polyfill. Dynamic load blocks you from using another bundler. And it requires dynamic module loader for any user.
  2. Add add fetch() polyfill to library docs.
  3. Keep if (global.fetch) check, but just show the warning for a user, that they must have fetch() own polyfill.
  4. You may wrap this check and warning in if (process.env.NODE_ENV === 'development') to cut this check in production bundle (anyway most of the developers will see this warning when they will test your library in different browsers).

from size-limit.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.