Repository
| Repository | Link |
|---|---|
binaryen-loader | https://github.com/DrSensor/binaryen-loader |
| Example Project | https://github.com/DrSensor/example-vue-component-rust |
About binaryen-loader
Binaryen is a compiler and toolchain infrastructure library for WebAssembly, written in C++. Most of the tools are cli app and one of them can be embedded into javascript (binaryen.js). This project is just a webpack loader that wraps binaryen.js (only the optimization parts) so it can be chained easily with other webpack-loader. For more insight see this tutorial in section Using Binaryen.
binaryen-loader with other webpack loaderCurrent features
Since this project based on binaryen.js, most of the features are just wrappers from module-optimization section. Some of the features are:
- define optimization flags in
options.optimization - run specific passes by defining it in
options.transformation.passes(sometimes it can shrink the bundle size, sometimes it can increase the execution speed, sometimes it does the opposites for both of them) - enables debug information in emitted wasm code by setting the
options.debugtotrue
Technology Stack
Since this project generated from webpack-defaults with some modification (see commit before v0.0.2), the tech stack used is what webpack-defaults proposed.
| Task | Tech/Tool | Configuration |
|---|---|---|
| Package Manager | npm (not yarn) | package.json |
| Test Framework | Jest | jest.config.js, jest.setup.js |
| Linter and others | ESLint, Prettier, husky | .prettierrc, .eslintrc.js, lint-staged, commitlint.config.js |
| Release Tool | husky, standard-version | |
| Build Tool (Transpiler) | Babel | .babelrc |
| CI | circleci | .circleci/config.yml |
Some interesting things to note
- ✨ There is helper file I created to make the testing enjoyable called on.js. For people who wrote some of webpack-loader, maybe you want to copy and edit that file 🐣
- 🐛 In Jest,
expect(err).toThrowErrorMatchingSnapshot()can make the test fail if runned on nodejs v10 or newer.
.toThrowErrorMatchingSnapshot(). Left: generated when running on node:10. Right: generated when running on node:8 and node:6- 💚 Since CircleCI now support Manual Approval, I edit the .circleci/config.yml (see this commit history) and use that feature.
- ✅❔ There is fix attempt for timeout problem as shown below. Not sure if the fix is because running jest with
--ciflag or settestEnvironment: 'node'(since by defaulttestEnvironmentisjsdom). Maybe adding jest.config.js override jest configuration in package.json (making it invalid).
- 💩 Since conventionalcommits take to much space on commit message, I try to combine it with gitmoji convention. Not sure if it's a good idea 😆
Future Plans
- Currently, using
passeslikeprint-call-graphthat is print the call-graph tostdoutwill pollute webpack outputted message. I plan to pipe the output into a file but still don't have a clue how to do it. Feel free to make PR, open an Issue, or just comment below if anyone has an idea 🙂 - There is an idea to separate some passes into categories (issue #2). Still evaluating and looking some feedback for this.
- I do document some behavior of some configuration in a form of unit-tests, like the provided export it exposed and range of binary size of wasm code after running Binaryen. I will continue this effort when finding something interesting along the way. Feel free to make PR (adding fixture and/or test case) if anyone found something interesting 🙂
- Add test case when chained to another loader, especially from foreign programming language (e.g Rust using
rust-native-wasm-loader).
How to contribute?
The project is open to contributions in any way possible. If you find a bug, please open an issue in the project's issue tracker. For submitting code patches, feel free to open pull requests on Github. Read CONTRIBUTING.md first for the best experience 😄