In production build CSS Sourcemaps in codesplit chunks are "duplicated", contained in both the .map file and the .js file

Steps to reproduce:

1. Generate project with vue-router, my exact answers:

? Generate project in current directory? Yes
? Project name vue-app
? Project description A Vue.js project
? Author Jakub Bogucki <[e-mail]>
? Vue build runtime
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests No
? Setup e2e tests with Nightwatch? No

1. Install dependencies
2. edit src/routes/index.js:
   1. remove import HelloWorld from '@/components/HelloWorld'
   2. replace component: HelloWorld with component: () => import('@/components/HelloWorld')
3. build project for production
4. open dist/static/js/0.[hash].js
5. format it so you can see it well 😃
6. somewhere in the file you should see something like that:

[LinusBorg]

Okay, so I’ve taken a look.

My observations

1. CSS itself is not “duplicated” - css in a codesplit component only lives in the component, not in the main app.css file.
2. However, CSS Sourcemaps are “duplicated” - the codesplit chunk (e.g. 0.js) contains the CSS sourcemap for that chunk’s CSS, and the map file for the code split chunk (e.g. 0.js.map) contains it as well. Not good.
3. including the sourcemap in the chunk is bad for file-size, so we should get it out of there somehow.
4. And finally: this also happens for “normal” .js files that are codesplitted and import a normal .css file - in other words: webpack / style-loader does this, not Vue or vue-loader.

Possible short-term fixes:

• disabling sourcemaps for production in /config/index.js.
• Setting allChunks: true in ExtractCSS extracts all css into app.css, even the CSS in codesplit bundles - this also extracts the sourcemap. But that might also be undesirable because I think by default, we do want the CSS to be in the codesplit bundle, but ideally, want the sourcemap for the CSS to be in a separate file.

The end goal:

• Keep the CSS in the codesplit chunk
• Get the source-map out of the codesplit chunk

…however, I have no idea if that’s actually possible with the current webpack tools we have.

Will investigate further.

Webpack Experts’ help welcome

This seems to be a tricky one, so if someone out there has a good trick up their sleeve that they can share, please comment / send PR!

[mfs780]

Just wondering if this issue is still present when setting allChunks to false.