webpack: In production build CSS Sourcemaps in codesplit chunks are "duplicated", contained in both the .map file and the .js file
Steps to reproduce:
- 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 <jakub.bogucki@xfive.co>
? Vue build runtime
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests No
? Setup e2e tests with Nightwatch? No
- Install dependencies
- edit
src/routes/index.js:- remove
import HelloWorld from '@/components/HelloWorld' - replace
component: HelloWorldwithcomponent: () => import('@/components/HelloWorld')
- remove
- build project for production
- open
dist/static/js/0.[hash].js - format it so you can see it well 😃
- somewhere in the file you should see something like that:
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 1
- Comments: 15 (10 by maintainers)
Links to this issue
Commits related to this issue
- `allChunks: true` by default close #1110 — committed to vuejs-templates/webpack by LinusBorg 7 years ago
- Set `allChunks: true` by default (close #1110) (#1149) * `allChunks: true` by default close #1110 * update wording. — committed to vuejs-templates/webpack by LinusBorg 7 years ago
- Merge branch 'develop' * develop: remove unnecessary exceptions bump version to 1.2.6 Add JX support (close #1146) Automatically install Dependencies and fix lint errors (#1133) Set `allChu... — committed to vuejs-templates/webpack by LinusBorg 7 years ago
- Set `allChunks: true` by default (close #1110) (#1149) * `allChunks: true` by default close #1110 * update wording. — committed to OnsenUI/vue-cordova-webpack by LinusBorg 7 years ago
- Set `allChunks: true` by default (close #1110) (#1149) * `allChunks: true` by default close #1110 * update wording. — committed to shenron/webpack by LinusBorg 7 years ago
- Merge branch 'develop' * develop: remove unnecessary exceptions bump version to 1.2.6 Add JX support (close #1146) Automatically install Dependencies and fix lint errors (#1133) Set `allChu... — committed to shenron/webpack by LinusBorg 7 years ago
Okay, so I’ve taken a look.
My observations
app.cssfile.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..jsfiles that are codesplitted and import a normal.cssfile - in other words: webpack / style-loader does this, not Vue or vue-loader.Possible short-term fixes:
/config/index.js.allChunks: truein ExtractCSS extracts all css intoapp.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:
…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!
Just wondering if this issue is still present when setting allChunks to false.
Well it’s not really duplicated. One is the “real” css, one is the source css for the source map, so it’s not really used as css during runtime. Still it doesn’t belong there of course.