rename-this-keyword
v1.0.4
Published
Rename this keyword to create a smaller bundle at the end when uglify is applied.
Downloads
2
Readme
Rename-this
Why?
So, the idea to create this babel-plugin
started when i saw one of my workmates' code which had a bunch of const _this = this
and that was totally weird to me.
I went to him and asked why that type of variables, and then he explained me.
The real deal of doing this is because uglifyjs
or any other minifier/uglifier
does not reduce the name of this
keyword, which ends up creating a bigger code, in terms of bytes
.
Using babels website repl, if we choose the minify
option.
Inserting the following code as input:
class Blah {
constructor() {
this.batman = '33';
this.myFunction = this.myFunction.bind(this);
}
stubFunction() {
const myProps = this.batman;
if (this.batman === '123') {
return null;
}
}
}
We are going to get the follow:
var Blah = (function() {
function a() {
_classCallCheck(this, a),
(this.batman = "33"),
(this.myFunction = this.myFunction.bind(this));
}
return (
_createClass(a, [
{
key: "stubFunction",
value: function stubFunction() {
this.batman;
if ("123" === this.batman) return null;
}
}
]),
a
);
})();
As you can see, this
keyword remains the same, meaning that the file size will be a little bigger.
TODO: Insert uglify examples.
Roadmap
- [ ] Write a better introduction and reasons why this was created.
- [ ] Publish this direct into npm
- [ ] Add more test cases
Must Update
- There is a unknown issue that when it inserts a variable
_then
it also inserts a\n
. Not that it is a major problem or something like that,uglify
will remove blank spaces during build, but still an impovement.