I’ve been living at S.Korea which has one of the best internet infrastructures.
But I knew that 70% of our users are from Southeast Asia or Africa. and generally, they had poor network infrastructure.
Pluto’s vision statement is Breaking down barriers in academia.
We all know a large JS size can undermine the user experience and become a barrier.
As a one man in Pluto network, I wanted to break this barrier as long as possible.
And even if the internet infrastructure is good, nobody likes the slow first screen or the slow first interaction.
There are many studies and papers about user experience concern with page speed.
Scinapse is using Universal Rendering.
Yeah. we all know it brings faster initial page load and SEO optimization.
However, it never speeds up the initial interaction.
What I mean is this.
as soon as you connect to the Scinapse, the users can see the search input element. (from server side rendering)
I remember that Angular team has made “rewind” method, but IDK how it is now.
I already used Webpack’s production mode and set NODE_ENV as production.
Also applied UgilfyWebpackPlugin which decreases bundle size a lot.
As the result, the bundle size was 1.8MB without Gzip.
To further reduce, I had to know where it took up a lot of capacity.
Fortunately, Webpack team provides the nice plugin called webpack-bundle-analyzer.
As you can see, Lodash, MomentJS, Material-UI, JQuery take so many spaces.
I planed to apply Tree Shaking and remove unneeded dependencies and upgrade webpack along with loaders.
The most important part is connecting Typescript with Babel.
I solved this problem with following articles.
The key is using ES2015 module system with Typescript and hand over it to Babel.
After applying this, Lodash and some other libraries became small.
1.8mb -> 1.6mb
I strongly recommend to change MomentJS to other library.
I know MomentJS has long history and strong community power.
However, it’s too heavy unless you use almost every feature of MomentJS.
There are other options.
It is much lighter and has fancy API.
You can choose dayjs.
It’s super lightweight but I couldn’t have the chance to use it yet.
1.6mb -> 1.53mb
It’s very easy to follow. And I think it’s not optional for who are using Material-UI.
1.53mb -> 1.3mb
Changed the toast message library from Toastr to Notie which has zero dependency.
1.3mb -> 1.23mb
I’ve done this in the following list order.
the most important part is 4.
this blog post was very helpful.
and you should use UgilfyWebpackPlugin for optimization.
1.23mb -> 1.14mb
495kb -> 291kb(52% of the original)
It was fun to define the problems, and solve the problem one by one.
it depends on designer’s choice and work yet.
it requires changes in the deploy process. And also increases code complexity a lot.
Pluto breaks down barriers in academia.