3

I have a fairly large app, where I always know where the user is going to start out ("homepage"). I use dynamic imports for everything except this homepage, and this works by providing me with to chunks: one "main" and one "async". Problem is, the "main" chunk includes all child imports of the dynamically imported modules as well, making it needlessly large by including all the stuff only dynamically imported modules use.

A dynamically loaded component (a route basically) imports all its dependencies with normal ES6 import. Some of these imports come from a separate, private NPM module.

This is part of my Webpack config:

    entry: {
        "app": "./src/app.js"
    },
    output: {
        path: path.resolve(__dirname, "public"),
        filename: "js/[name].bundle." + appPackage.version + ".js",
        chunkFilename: "js/[name].bundle." + appPackage.version + ".js",
        publicPath: "/",
    },

and imported like this (in routes):

import( /* webpackChunkName: "async" */ "module-name")

How can I force Webpack to bundle all dynamic resources' child imports into the same "async" chunk? Or am I missing something here?

Tomm Huth
  • 215
  • 2
  • 10
  • For reference, I just asked the same question here: https://stackoverflow.com/questions/59369444/webpack-v4-creating-tiny-chunks-by-route. Not answered yet. – rmartrenado Dec 17 '19 at 09:05

0 Answers0