1

My production build has a single 2 MB large js file. Lighthouse shows that a half of it was not used during a rendering. I would love to split it into smaller chunks.

Versions:

"@vue/cli-service": "^4.5.14",
  "peerDependencies": {
    "webpack": "^4.0.0"
  }

I have already annotated the routes:

component: () => import(/* webpackChunkName: "user-chunk" */ './views/user/SignUp.vue'),
component: () => import(/* webpackChunkName: "content-chunk" */ './views/item/Blog.vue'),
component: () => import(/* webpackChunkName: "admin-chunk" */ './views/poll/CreatePoll.vue'),

vue.config.js forbids the chunks at this moment:

configureWebpack: { devtool: 'source-map', optimization: { splitChunks: false, },

I tried to modify it according Webpack doc, e.g.

splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,

And the result was not much helpful:

dist\js\chunk-vendors.ce439fb4.js                             1528.75 KiB                                                                         419.19 KiB
dist\js\app.4d6fd109.js                                       604.22 KiB                                                                          114.19 KiB

I used to have over 30 chunks a year ago. There is no relevant commit in the webpack configuration so this is probably a consequence of some library upgrade.

dist\js\chunk-vendors.37407f10.js 1257.82 KiB 364.55 KiB
dist\js\app.9a0c381b.js 65.89 KiB 20.44 KiB
dist\js\chunk-73c49296.3fc6218f.js 44.71 KiB 10.08 KiB
dist\js\chunk-581504f2.0a864656.js 16.44 KiB 4.96 KiB

This is my endpoint: https://www.mezinamiridici.cz/ and sources.

How can I minify the initial load of my website so only the neccessary scripts are fetched?

enter image description here

Leos Literak
  • 8,805
  • 19
  • 81
  • 156
  • 1
    In most cases, there's nothing you can do. For example, you can't tree-shake `chart.js`. You could, however, tree-shake `bootstrap-vue` if, instead of importing it all in `main.(js|ts)`, you would import components directly where you use them. Might be worth tree-shaking the icons, if not all components. But it's verbose and, in my estimation, it's not worth the effort. From what I've tested, your site loads quite fast and fairs well in audit tools. – tao Dec 26 '21 at 14:02
  • The performance score is just 34 and FCP is 6.5 seconds. Not great not terrible. So I seek for improvements. For example to load Boostrap CSS from CDN. Or use dynamic modules? Thanks for reply. – Leos Literak Dec 26 '21 at 14:11
  • I got a FCP of `2s` and a PS of `61` on https://gf.dev/website-audit. What are you using? – tao Dec 26 '21 at 14:15
  • https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.mezinamiridici.cz%2F Mobile tab is so slow, desktop much faster. – Leos Literak Dec 26 '21 at 14:28

0 Answers0