Comments (14)
Hi. I think Size Limit supports it out of box.
Show your Size Limit version and be config.
from size-limit.
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.
Hm. Can you show your webpack config?
from size-limit.
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.
Is it a JS library (so you will deliver it to users by npm) or an application?
from size-limit.
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.
Can you debug here https://github.com/ai/size-limit/blob/master/index.js#L155
What will be in assets
variable
from size-limit.
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:
from size-limit.
I need a list of assets
. Did webpack created a separated file for dynamic import.
from size-limit.
console.log(assets)
->
[ 'demo.js' ]
console.log(stat.assetsByChunkName)
->
{
main: 'demo.js',
'request-registry-fetch-ponyfill': '1.demo.js'
}
from size-limit.
My confusion was because of the large size but it is the webpack code which is added to the code.
from size-limit.
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.
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.
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:
- Do not use
fetch()
polyfill. Dynamic load blocks you from using another bundler. And it requires dynamic module loader for any user. - Add
add fetch()
polyfill to library docs. - Keep
if (global.fetch)
check, but just show the warning for a user, that they must havefetch()
own polyfill. - 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)
- Should I ignore some file types?
- size-limit fails with rxjs imports
- Add customisation for improving performance culture HOT 6
- Loosen strictness of peer dependency requirement of `tslib` HOT 1
- Global installation with plugin support HOT 5
- React should be peer dependency HOT 7
- The comment might be misleading when size limit fails HOT 5
- Unable to run on windows 10 HOT 4
- Receive ERR_UNSUPPORTED_ESM_URL_SCHEME error on version 10 HOT 5
- Switch from GZIP to Brotli by default HOT 4
- plugins are `import`ed with `require.resolve` which will resolve `commonjs` entry for dual package HOT 4
- Allow customize error message HOT 1
- Inaccurate bundle size when using dynamic imports HOT 10
- Support `.size-limit.mjs` config file HOT 2
- Migrate codebase to TypeScript HOT 4
- Esbuild plugin produces incorrect numbers when CSS used HOT 7
- Extra blank lines when using --silent HOT 1
- CLI does not work with workspaces and yarn pnp or pnpm without hoisting HOT 4
- Can the config option be supported like eslint or stylelint to specify the path of the configuration file? HOT 1
- size-limit fails to detect paths/files containing unescaped characters HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from size-limit.