Auto-load a chunk in entry point
Asked Answered
I

2

10

Webpack configuration is a part of Vue CLI setup (can be checked with vue inspect). This is a relevant part of it:

  entry: {
    foo: [
      '.../src/foo.js'
    ],
    barWidget: [
      '.../src/barWidget.js'
    ],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        common: {
          name: 'chunk-common',
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    },
    ...

And HTML output is:

<script type="text/javascript" src="/assets/js/chunk-vendors.[HASH].js"></script>
<script type="text/javascript" src="/assets/js/foo.[HASH].js"></script>

and

<script type="text/javascript" src="/assets/js/chunk-vendors.[HASH].js"></script>
<script type="text/javascript" src="/assets/js/barWidget.[HASH].js"></script>

There's no problem for foo to have as many script tags as needed, but barWidget is widget entry point that is supposed to be loaded at once with no initial chunk dependencies. My intention is to make barWidget be loaded with a single line of code (hash will likely be disabled for this purpose):

<script type="text/javascript" src="/assets/js/barWidget.js"></script>

But in its current state it fails to load if chunk-vendors is omitted.

I'd prefer to keep vendors and common chunks as they are because they are splitted in a reasonable way and can be reused on client side between entry points, but I need barWidget to auto-load a chunk it depends on. A less preferable way would be to disable chunks but for barWidget only, chunk splitting in other entry points should remain unchanged.

A way to reproduce it is basically a new Vue CLI project with 2 entry points added, or any Webpack project with similarly configured splitting.

Here is the project (listed for completeness):

package.json

{
  "name": "foobar",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  }
}

vue.config.js

module.exports = {
  pages: {
    foo: {
      entry: 'src/foo.js',
      template: 'public/foo.html',
      filename: 'foo.html'
    },
    barWidget: {
      entry: 'src/barWidget.js',
      template: 'public/barWidget.html',
      filename: 'barWidget.html'
    },
  },
};

public/foo.html

public/barWidget.html

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
  </body>
</html>

src/foo.js

import { createApp } from 'vue'
import Foo from './Foo.vue'

createApp(Foo).mount('#app')

Foo.vue

<template>
  <HelloWorld msg="Foo"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

src/barWidget.js

import { createApp } from 'vue'
import BarWidget from './BarWidget.vue'

createApp(BarWidget).mount('#app')

BarWidget.vue

<template>
  <HelloWorld msg="Bar widget"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>
  • Can barWidget be forced to automatically load chunk-vendors.[HASH].js by means of Webpack, without loading it explicitly in the place where barWidget.[HASH].js is being used?

  • Can barWidget entry point be forced to not use other initial chunks (chunk-vendors, etc) and output self-sufficient barWidget.js bundle, without affecting the way splitting works in other entry points?

  • Are there other options for the described scenario?

Injure answered 2/4, 2021 at 19:49 Comment(6)
If barWidget depends on node_modules there's obviously no way considering a vendor cache group defined. Generally it's hard to say anything without minimal reproducible test caseEnaenable
@Enaenable Yes, the reason vendor chunk appears is that node_modules is being used, this would be true for virtually any app. I believe the thing that the thing that the question describes is natural to Webpack and can be reproduced with any setup that has initial chunks. But I'll try to add an example that shows this.Injure
For the barWidget entry, if barWidget.js imports anything from node_modules , then vendor chunk will be created. Or if some other code is including something from node_modules (i.e. something from webpack config). It's likely that "vendor" chunk won't be created if nothing needs it for the entry, but it looks like that's not the case, so you need to find why code from node_modules is needed for the barWidget entryEnaenable
maybe specifying a different chunk name on the barWidget imports with the comments annotations would help. see webpack.js.org/api/module-methods/#magic-commentsComfit
@Enaenable Yes, it imports something from node_modules, this is the case for >99% modular web projects. In this case it's Vue project and it imports at least vue itself. To make it clear, the reason why vendor chunk is produced is obvious (same for other possible initial chunks), the question is how to make it unnecessary to explicitly load chunk-vendors.js with <script> or else where a specific bundle is being used. I provided a project for completeness, it's currently based on Vue CLI setup with described Webpack config under the hood.Injure
@TiagoCoelho This is the first thing I've checked but as I far as I can see, annotations are applicable only to dynamic imports, while these chunks are produced from static import.Injure
C
3

I think that what you want is what is described in this webpack issue reply

the reply uses a function to exclude the dependencies of a specific entrypoint from being included in a chunk:

  optimization: {
    splitChunks: {
      cacheGroups: {
          vendors: {
            // ... your current config, just change the chunks property            

            // Exclude pre-main dependencies going into vendors, as doing so
            // will result in webpack only loading pre-main once vendors loaded.
            // But pre-main is the one loading vendors.
            // Currently undocument feature:  https://github.com/webpack/webpack/pull/6791
            chunks: chunk => chunk.name !== "barWidget"
          }
      }
    }
  },

to do this with vue should be just a matter of changing the webpack config in the vue.config.js file like this:

module.exports = {
  configureWebpack: config => {
     config.optimization.splitChunks.cacheGroups.vendors.chunks = 
       chunk => chunk.name !== "barWidget";
  }
}

I haven't tried this but I think it should work as is or with some minimal tweaks

Comfit answered 8/4, 2021 at 15:14 Comment(1)
Thanks a lot for the answer, the part from configureWebpack is workable and concise. Another answer contains the other part of the puzzle, which is chunks: ['barWidget']Injure
G
3

You can use a function to filter the chunks. See this Webpack issue

vue.config.js

module.exports = {
  pages: {
    foo: {
      entry: 'src/foo.js',
      template: 'public/foo.html',
      filename: 'foo.html'
    },
    barWidget: {
      entry: 'src/barWidget.js',
      template: 'public/barWidget.html',
      filename: 'barWidget.html',
      chunks: ['barWidget']
    },
  },
  chainWebpack: config => {
    if (process.env.NODE_ENV !== 'test') {
      config.optimization.splitChunks({
        cacheGroups: {
          defaultVendors: {
            name: `chunk-vendors`,
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            chunks: chunk => chunk.name !== "barWidget"
          },
          common: {
            name: `chunk-common`,
            minChunks: 2,
            priority: -20,
            chunks: 'initial',
            reuseExistingChunk: true
          }
        }
      })
    }
  }
}

Note the pages.barWidget.chunks - it is needed because otherwise HtmlWebpackPlugin includes vendors chunk into barWidget.html even it is not needed at all...

Result: Result

Gorgonzola answered 8/4, 2021 at 15:34 Comment(1)
I appreciate the point regarding HtmlWebpackPlugin, saved me some time on debugging.Injure

© 2022 - 2024 — McMap. All rights reserved.