Bundle your Tabris.js app code with webpack
What is webpack?
Webpack is a module bundler. It takes your JavaScript source code, which may be spread among several files, as input, and produces a single JavaScript file as output (“bundle”). The bundle may also include your npm dependencies. When producing the bundle for production, it attempts to eliminate unused code by tree shaking.
Why would I want to bundle my source code?
You can decrease the startup time of your Android app in production since only a few JavaScript files need to be loaded. We observed improvement in the loading speed of embedded code on Android by roughly 25% (1.8s vs 2.5s) when using a bundle. We didn’t observe a major difference in the speed of loading of embedded bundles versus separate source files on our iOS client though.
Side-loading apps with bundled code are also faster, independent from the platform since there is a stronger bottleneck here in the face of the development server – transferring lots of files over the network takes a longer time than transferring only a few files. In practice, for a real-world app we tested, this resulted in 20-30% reduction of loading time, which for the particular app meant that it took 5-6s to start when side-loading bundled vs 7s when side-loading separate source files.
As a bonus, you can reduce the size of the JavaScript part of your app. Your results may vary, but for two of our larger, production apps with about 10 external npm dependencies (including transitive dependencies), we observed a reduction of the size of the distributable JavaScript code by over 60% (23,5 MB -> 3,7 MB and 9,7 MB -> 3,2 MB respectively).
A drawback of using the webpack to bundle the source code of your Tabris.js app is having to maintain the webpack configuration. In rare cases, you might also face issues with some dependencies, for example, dependencies that load JavaScript resources dynamically. Such resources might get removed by the tree shaking algorithm of the webpack unexpectedly. Problematic dependencies can be excluded from bundling though.
How to configure the webpack for a Tabris.js app?
First, webpack and webpack-cli need to be installed as devDependencies (since they will be only used at compilation time):
|
1 |
npm i --save-dev webpack webpack-cli |
If your application includes TypeScript code, the TypeScript loader for the webpack also needs to be installed.
|
1 |
npm i --save-dev ts-loader |
Next, create the webpack configuration file. Name it webpack.config.js (default name that makes the webpack CLI pick it up automatically) and place it in the root of your project. You can use the following as a starting point:
./webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
module.exports = { // Make sure the entry file is correct for your app: entry: './src/index.js', externals: ['tabris', 'tabris-decorators'], output: { libraryTarget: 'commonjs2', filename: "index.js", path: __dirname + "/dist" }, // If you don't use any TypeScript code, you don't need to include the extensions // ".ts" and ".tsx" and can also omit the "module" configuration below. resolve: { extensions: [".ts", ".tsx", ".js", ".jsx"] }, module: { rules: [ { test: /\.(j|t)sx?$/, loader: "ts-loader" } ] } } |
Next, your app’s "build" and "watch" scripts in package.json need to be adjusted (or you might need to introduce them, if your app doesn’t have them):
./package.json
|
1 2 3 4 5 6 7 8 9 10 |
{ ... "scripts": { ... "build": "webpack", "watch": "webpack -w", ... }, ... } |
"build" is executed to build your app when running tabris serve and "watch" is executed when running tabris serve -w. In comparison to "build", the "watch" script will be run in a background process in parallel with the development server so that it can recompile the app on change, while the CLI will wait for "build" to finish before starting the development server.
Please, make sure that the "main" property in your package.json is pointing to "dist", the output destination configured in ./webpack.config.js:
./package.json
|
1 2 3 4 5 |
{ ... "main": "dist" ... } |
Next, double-check that all of your dependencies except tabris and tabris-decorators are declared as devDependencies. Since they will be bundled up by the webpack, they are not required at runtime and will only waste space.
Now you can run tabris serve as usual, and your newly configured app bundle will be built and served.
I’m facing issues when bundling some external npm dependencies.
You can exclude them from bundling by adding them to the "externals" configuration in webpack.config.js and configuring them as runtime dependencies in package.json:
./webpack.config.js
|
1 2 3 4 5 |
module.exports = { ... externals: ['tabris', 'tabris-decorators', 'my-external-dependency'], ... }; |
You can run npm i --save , which will move the dependency from devDependencies to dependencies in package.json automatically:
|
1 |
npm i --save my-external-dependency |
What’s coming up next?
This post does not explain how to configure the creation of source maps when using the webpack. This, and how to use different configurations for development and production, will be covered in a follow-up post, so stay tuned!
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
