Split vendor css into its own file

[Ronan Jouchet]

This is a followup to bootstrap-vue/bootstrap-vue#143 - Document including Bootstrap CSS, in which I'm asking for advice to integrate CSS dependencies into my vuejs-templates/webpack-based app.

In comment bootstrap-vue/bootstrap-vue#143 (comment), I'm advised to configure my webpack build to emit two separate bundles app.css and vendor.css. This for the same reasons it's done for the js, in order to:

1. Limit the number of network requests, while ensuring to...
2. ... make the slowly-changing vendor.<hash>.css as cache-friendly as possible.

I'm now looking at my webpack build configuration, which is mostly this template untouched, and I don't think this is currently baked in it.

• Right, or did I miss it? If right, would it make sense to add such a feature to the template, and are you interested in a PR doing it?
• Taking a step back to look at my original question in bootstrap-vue/bootstrap-vue#143, am I missing better ways to bundle external CSS?

Thanks.

[Asaf Yishai]

Hi,

I solved that by changing build/webpack.prod.conf.js, lines 69-77, from:

        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }

to:

        return (
          module.resource &&
          (/\.js$/.test(module.resource) ||
            /\.css$/.test(module.resource)) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }

notice the "/.css$/.test(module.resource)) &&" line.
This cause css that are coming from node_modules to be in vendor file.

Let me know if it's working for you, because I only did minimal testing on it.

[Ronan Jouchet]

@asafyish looks good to me, and works as expected here. Thanks! Proposing as PR #603 with this fix.

[Bart Corremans]

When you do this make sure to also include .vue in the regex check, otherwise this will cause issues with css that's extracted from vendor .vue files during build. Found this out the painful way.

[Ronan Jouchet]

"When you do this make sure to also include .vue in the regex check, otherwise this will cause issues with css that's extracted from vendor .vue files during build. Found this out the painful way."

@bartcorremans thanks for the tip. Have you been running this without problem for some time? Should I just amend my PR with /\.(css|js|vue)$/.test(module.resource) and call it a day?

[Bart Corremans]

This is something I just stumbled upon today when importing a third-party .vue file. The generated output seems ok with this change but it's not something that I've been using in production for an extended time.

[Ronan Jouchet]

Alright, leaving this without |vue for now. @bartcorremans (or reviewers considering merging this): if you become confident it should be added, ping me here and I will amend the fix.

[Thorsten Lünborg]

Since this doesn't seem to be well-tested I will close this and not merge the PR.