Webpack with WebAssembly: GSoC 2018 Week 0

GSoC 2018 Week 0: My first story

Jevan Chan
webpack
3 min readMay 3, 2018

--

The title might be a little bit confusing; it is not talking about treating WebAssembly as the first class citizen and importing in your application; We are going to introduce WebAssembly to Webpack cores and dependencies for faster building speed!

I am Jevan Chan, an accepted student in Google Summer of Code 2018 for Webpack. This is my first story with GSoC 2018, I will share my experiences and keep updating my stories during this summer.

About Me

I am an undergraduate student at National Chiao Tung University, Taiwan. I major in Electronics Engineering, and it is my fourth year of study. Web development has been my interest in past years, and I’ve been a contractor for multiple jobs as a full-stack JavaScript developer. For the front-end development, some of the technologies that I’ve leveraged are Vue.js bundled by webpack. That is also how Webpack came into my life.

My Story with Webpack

Although I have worked on projects built by Webpack for years, I have never contributed to this project before. To me, Webpack is a powerful but mysterious tool which requires you to prepare complex configuration, loaders, and plugins before starting on your project (Fortunately, Webpack 4 makes it easier by introducing #0CJS, thanks!).

The story began from the early Feb 2018. When I finished my first toy compiler project extended-mini-pascal, I started to extend my interest in JavaScript and compiler related projects. At that moment, webpack is announced to be accepted to GSoC 2018 with a list of appealing ideas. I decided to apply to Webpack immediately. It is an excellent beginning for me to contribute and give back to the project which supports my development all the time. Besides, it is also a great chance to face the real-world, at-scale challenges, and I think I will definitely learn a lot from contribution to Webpack and the advising from mentors.

Episode: Application with Dhruvdutt

My application is prepared with Dhruvdutt, another GSoC Webpack accepted student from India. Interestingly, we are completely stranger to each other before the application, we met when doing our first PRs to Webpack! He is actually the first friend I met in my trip of GSoC, and I am excited that both of us are accepted and going to make Webpack better together in the future.

Work to Do

As what aforementioned, my project in GSoC 2018 is to enhance the performance of Webpack by WebAssembly. My mentor, Sean T. Larkin, and I will rewrite the cores and dependencies of Webpack to languages like C++ or Rust, and compile the WebAssembly binaries from them. These WebAssembly binaries will replace the JavaScript modules and give us faster building.

Considering the first dependency of Webpack to compile to WebAssembly, we choose webpack-sources as our starting point. It is a package handles source codes and contains tons of string manipulations. We will then test it with benchmark and see how fast it becomes.

For those who are still using Webpack on Node.js 6.x, don’t worry, we always keep the backward compatibility in our mind. The new dependencies/cores will detect the WebAssembly support of the runtime, and fall back to js/asm.js when it is not available.

Structure of JavaScript package with WebAssembly

Imagine if we have a WebAssembly powered Webpack, it will be faster and reduce more bundle time. Furthermore, I think WebAssembly is an awesome technology, and getting to create and utilize it in webpack is really cool!

Keep track on the GSoC series, and don’t hesitate to give us any feedback and comments. Your suggestions are always welcome and will absolutely make our projects and Webpack better!

--

--