Giters

quasarframework / quasar-template-default

[DEPRECATED] Quasar App Boilerplate / Starter kit

Home Page:http://quasar-framework.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

'load' function in routes.js makes code splits for webpack

musicformellons opened this issue · comments

commented

The ‘load’ function which is used in the template routes.js:
https://github.com/quasarframework/app-template-default/blob/master/template/src/router.js
does have consequences for the build chunks. Is this intended?

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

Maybe explain in the code how to use it or something.

commented

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/

commented

Ok. What I do not quite get (I did already do some reading about the CommonsChunkPlugin and do 'somewhat' understand that you can tune the amount of overlap etc.) is that in my case it seems a bit silly that with a parent and child component I get two chunks which 95% overlap. Especially since there is no route to the child, there seems no purpose in the extra chunk!? Looks like a useless chunk to me.

commented

@musicformellons can you please make a barebones repo to help me see your actual use-case? Thanks!

commented

I will send the repo-link by email to you.

commented

Looked at the repo and have a few comments:

  1. 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).

  2. You don't need to specify text/babel in your <script type='text/babel'> tags. Simply use <script>.

commented
  1. Ok!
  2. In my Pycharm IDE it helps in getting proper code support...