search

laravel-mix / laravel-mix

The power of webpack, distilled for the rest of us.
MIT License
5.27k stars 808 forks source link

Dynamic imports aren't grouping bundles together in Mix 6 #2919

Open patrickomeara opened 3 years ago

patrickomeara commented 3 years ago

Description:

In Mix 5 using dynamic imports produced common modules in chunks:

All (3.95 MB)
/js/dist/bundle.b7b80f.js (1.86 MB)
js/dist/vendors~orgs.8ab12f.js (472.67 KB)
js/dist/tasks.49a0dc.js (439.8 KB)
js/dist/assets.dd11d0.js (289.83 KB)
js/dist/materials.b7770f.js (285.89 KB)
js/dist/system.41c375.js (252.81 KB)
js/dist/vendors~account~admin~assets~materials~orgs~system~tasks~timesheets.587530.js (83.17 KB)
js/dist/vendors~admin.741d64.js (55.44 KB)
js/dist/orgs.dee379.js (54.42 KB)
js/dist/account.32230e.js (48.03 KB)
js/dist/vendors~account~admin~assets~materials~orgs~system~tasks.9f7e0d.js (46.42 KB)
js/dist/admin.194f45.js (41.22 KB)
js/dist/vendors~admin~assets~materials~system~tasks.b7c88b.js (24.44 KB)
js/dist/timesheets.1a8255.js (24 KB)
js/dist/vendors~assets~materials~orgs~system~tasks.7676c4.js (19.39 KB)
js/dist/error.7afdc0.js (3.3 KB)

In Mix 6 the common modules are placed in each chunk:

All (5.01 MB)
/js/dist/bundle.js (1.87 MB)
js/dist/orgs.839d2b.js (676.95 KB)
js/dist/tasks.b01083.js (623.7 KB)
js/dist/assets.75af72.js (471.2 KB)
js/dist/materials.002fd6.js (468.29 KB)
js/dist/system.ef01ec.js (435.25 KB)
js/dist/admin.8af2c4.js (249.37 KB)
js/dist/account.a14a49.js (177.37 KB)
js/dist/timesheets.482bfb.js (104.64 KB)
js/dist/error.b2be8b.js (4.35 KB)

This adds duplicate code and a bigger overall download.

I understand that I can extract all the modules to a vendor.js but this doesn't help with the initial download time if a user doesn't need the modules in the current section of the app.

I'm wondering if this was a planned change or a byproduct of something else during the v5 to v6 releases, and what is involved in getting the common modules in separate chunks again as it was in v5.

Thanks.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

selim13 commented 3 years ago

This is a valid issue.

Mix 6 disables webpacks's default cacheGroups, preventing code splitting (and grouping) inside dynamic imports. https://github.com/JeffreyWay/laravel-mix/blob/d27a77abb5a32f42e47d6e3d344ba757d85ad89a/src/Chunks.js#L165

what is involved in getting the common modules in separate chunks again as it was in v5.

The simplest solution seems like is to reenable webpack's default cacheGroups from config. Something like this:

mix.webpackConfig({
  optimization: {
    splitChunks: {
      cacheGroups: {
        customDefaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        customDefault: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
});

See https://webpack.js.org/plugins/split-chunks-plugin/ for more information.

thecrypticace commented 3 years ago

Yeah we explicitly disabled it because it can produce chunks with very inconsistent names. I think this would be a good feature to add back that can be explicitly enabled though.

saas786 commented 9 months ago

@thecrypticace

Any update on this? I would appreciate it if it's handled by default to produce consistent output and avoid issues.