build warnings and errors; and bundle size

MusicForMellons

I ‘build’ my bundle just to see if it would work. It does build a ‘dist’, but I get following warnings & errors:

Hash: dc1c472098fcc5fa629c
Version: webpack 2.1.0-beta.28
Time: 36257ms
                                   Asset       Size  Chunks           Chunk Names
            js/5.05cddf432ad73d34cdae.js  936 bytes  5, 8[emitted]  
fonts/MaterialIcons-Regular.012cf6a.woff    57.6 kB  [emitted]  
            js/1.d3e8fdc4a88e9f0b9b21.js    16.5 MB  1, 8[emitted]  [big]
            js/2.191531e1a0ad5faaf041.js    6.14 kB  2, 3, 5, 8[emitted]  
            js/3.99be3879ce8f9c7100cc.js    2.49 kB  3, 8[emitted]  
            js/4.d2e43b724f03700addbc.js     1.9 kB  4, 8[emitted]  
            js/0.b0eeaed540753733b92b.js    16.5 MB  0, 1, 8[emitted]  [big]
                            js/vendor.js     561 kB  6, 8[emitted]  [big]vendor
                               js/app.js    9.59 kB  7, 8[emitted]  app
                          js/manifest.js    1.58 kB  8[emitted]  manifest
app.e14f2d289eba96543a7f62c62a3390dc.css     245 kB  7, 8[emitted]  app
                              index.html  708 bytes  [emitted]  

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB). 
This can impact web performance.
Assets: 
  js/0.b0eeaed540753733b92b.js (16.5 MB)
  js/1.d3e8fdc4a88e9f0b9b21.js (16.5 MB)
  js/vendor.js (561 kB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.
Entrypoints:
  app (818 kB)
      js/manifest.js
      js/vendor.js
      js/app.js
      app.e14f2d289eba96543a7f62c62a3390dc.css


ERROR in js/0.b0eeaed540753733b92b.js from UglifyJs
SyntaxError: Unexpected token: name (r) [js/0.b0eeaed540753733b92b.js:570675,6]

ERROR in js/1.d3e8fdc4a88e9f0b9b21.js from UglifyJs
SyntaxError: Unexpected token: name (r) [js/1.d3e8fdc4a88e9f0b9b21.js:570644,6]

I have no clear picture about what bundlesize is normal/ desirable (the smaller the better obviously…), but thought < 10 Mb or something. So the 2 x 16 MB sounds like an awful lot to me.

As the error messages also refer to these two chunks, any idea what’s going on?

MusicForMellons

When I zip my dist folder (or js folder within it) I am more around 2 to 3 Mb. Probably that is what I should be looking at?

Val

@MusicForMellons
Do you require() or import, somewhere in your code, some ES6 JS file, external to /src ?
UglifyJs won’t work with ES6 code.

i.e. I have this structure

/common-js-files
+--- my-module.es6.js
+--- my-module.babelified.js
/some-quasar-project
+-- /src
     +--- ...

If I require('../../common-js-files/my-module.es6.js') It won’t be auto-transpiled during the build since it’s external, and many things will break. I have to transpile it to ES5 by myself, and require('../../common-js-files/my-module.babelified.js')

Regarding the size of your bundle, no doubt it will reduce a lot once the UglifyJs error is resolved.

MusicForMellons

I see what you mean. I checked but do not find any such imports…

MusicForMellons

Foolish of course…, I thought of the build process as a blackbox, but you can simply open the chunks in a texteditor and see what is causing ‘the mess’…:
Most Mb’s were a large geosjson file that I import as a static file (within /src).
There are some npm packages that do no seem to get compiled properly…
The two big chunks are the same, so probably when setting up vue-router I probably mess up and now have a double import of my app.

Need to fiddle some more but should get this working I suppose.

MusicForMellons

Seems pretty strange to me now that the ‘dev’ build worked fine…!!! No obvious problems or errormessages there…

Val

Glad you found the culprit

Val

Another trick I forgot to tell you about, is to add this line to the webpack callback in /build/script.build.js :

webpack(webpackConfig, function (err, stats) {
  /* ... */
  fs.writeFileSync('./stats.json', JSON.stringify(stats.toJson()))
})

Then after each build, you will find a /stats.json, wich you can upload to https://chrisbateman.github.io/webpack-visualizer/, and get a nice preview of what makes your bundle heavy.
It gives the sizes before minifcation so it’s not the real prod sizes, but still very useful to spot what makes your bundle fat

i.e. my stats :
0_1485290751957_upload-704a052e-14c3-4255-8cff-c3ce0b1531c9

Val

@MusicForMellons
as far as I know, in dev mode the uglifyJs plugin is not called, that’s the reason it won’t throw errors

MusicForMellons

@Val This is like a late Xmass present! Wow! Thx!

MusicForMellons

@Val I tried couple of things but still get the two similar chunks (one has an extra component in it)… I thought it might be the webpack build and config files, so I got updated ones from the quasar template repo, but problems remains. Does vue-router impact how many chunks you get? I was thinking it maybe is a ‘parent-child component thing’, which would explain why ‘the child chunk’ is slightly larger.

MusicForMellons

This post is deleted!

MusicForMellons

I solved the geojson static file issue by reading docs (always good) and works nicely now refering by ‘/static/geojson/filename’ and indeed the file is not included in the chunks but in dist/static/ folder:
http://quasar-framework.org/guide/app-handling-static-assets.html

Remaining issues are probably related to my ES6 imports or something. When I do e.g.:

import turf from 'turf'

The turf npm package from my node_modules folder is included in both big chunks I have. Whereas obviously it should be in one chunk and i would think the vendor-chunk…

MusicForMellons

Using require with turf gives exact same chunks. I am pretty close now however as I noted that my parent component has this code:


<script type='text/babel'>
import Child from './Child.vue'

export default {
  name: 'parent',
  components: {Child}
}

</script>

The duplicate chunks are all the imports done in the Child… I would expect Webpack to filter these out or something? What am I doing wrong in the way I deal with Parent and Child components and imports?

MusicForMellons

It is related to the ‘load’ function which is used in the template routes.js:
https://github.com/quasarframework/app-template-default/blob/master/template/src/router.js

It makes a code split for webpack. See also:
https://forum.vuejs.org/t/duplicate-webpack-chunks/5572

I will ask in the repo to maybe add some comments in the code to clarify.

rstoenescu

Yes, it’s intended. It doesn’t require any explanation because it only does a “System.import” call, which splits code. If you don’t want to split code (not recommended as your whole app will just load a biiig file instead with all your routes whether the user visits them or not) then just use simple ES6 import statements.

You can however change the splitting strategy in /build/webpack.prod.conf.js (search for the two entries on CommonsChunkPlugin). Read more about Webpack code splitting on https://webpack.js.org/plugins/commons-chunk-plugin/

rstoenescu

@MusicForMellons Looked at your repo and have a few comments:

Children component files should be placed under a subdirectory or in a different directory. When System.import-ing with a file based on a variable (so not known which will it be at compile time) then Webpack builds chunks for all files in that directory. It does not mean browser will actually load them all, just the right one at runtime (which is the parent in your case).
You don’t need to specify text/babel in your <script type='text/babel'> tags. Simply use <script>.

MusicForMellons

Ok!
In Pycharm this gives better code support… and it doesn’t harm I suppose.

No More Posting New Topics!

build warnings and errors; and bundle size