Bundle Optimization #53
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add a item to `package.json`'s `scripts` block to build the app and run the bundle analyzer on it.
Use the runtime-only version of Vue.js (minus the template compiler) to reduce the size of the bundle. The template compiler was only needed because of the string template in the Vue.js root, which is easily converted to a render function.
Update the arguments used to build the application when analyzing to ensure Vue's production mode is enabled.
Add `bundle-stats.json` to the list of files deleted by the clean script.
Use the standalone release of Chart.js. This removes the unused second copy of Moment.js from our bundle.
lawhead
approved these changes
Jul 13, 2018
heathharrelson
commented
Jul 13, 2018
| @@ -26,7 +26,14 @@ export function run(pid, canEdit, jsonAssetUrls) { | |||
| new Vue({ | |||
| el: '.vizr-container', | |||
| components: { Vizr }, | |||
There was a problem hiding this comment.
The root component is the only one with a template string (all the others are single-file components processed by vue-loader), which is why the template compiler was required at runtime. This equivalent render function allows removing the compiler from our bundle.
This change could also be made to phenotypr-body.
heathharrelson
commented
Jul 13, 2018
| @@ -65,6 +67,7 @@ module.exports = { | |||
| devtool: 'cheap-source-map', | |||
| plugins: [ | |||
| new DefinePlugin({ | |||
| 'process.env.NODE_ENV': JSON.stringify(buildEnv), | |||
There was a problem hiding this comment.
Allows Vue.js build process to strip out development-mode code. See the Vue.js deployment guide.
kirenotneb
approved these changes
Jul 13, 2018
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I spent some time yesterday comparing the bundles of the master branch and the vue branch using webpack-bundle-analyzer and found a couple of interesting things:
vue-loaderto pre-compile our templates.This PR makes the following optimizations:
With these changes, the vue branch's bundle is around 100 KB smaller than master when uncompressed (10 KB smaller compressed). We may get additional improvements by upgrading to Webpack 4.