Css are embeded in the production build

[DarKDinDoN]

Since the last few commits, the css are embeded in the JS files.
This happens only with the vue-router lazy-load method :

// This works fine, css are extracted.
router.map({
  '/guest': {
    name: 'login',
    component: require('containers/Guest/Guest')
  }
})

// This doesn't work, css are extracted but also remains in the JS chunk
router.map({
'/guest': {
    name: 'login',
    component: function (resolve) {
      require(['containers/Guest/Guest'], resolve)
    }
})

[yyx990803]

This is expected - only CSS in the initial entry chunk is extracted. Any async-loaded chunks CSS is dynamically inserted. This is actually recommended because you don't want to load all the CSS in your async chunks on initial load.

See http://webpack.github.io/docs/stylesheets.html#separate-css-bundle

[DarKDinDoN]

Consider the same example as vuejs/vue-loader#139 with vue-router and lazy-load to switch between ComponentA and ComponentB.

Each component has its own chunk (0.js = ComponentA & 1.js = ComponentB) and each chunk contains the same CSS.

Each chunk has its own piece of css, but each chunk is bigger. It would be best if the CSS was extracted in a file that is required along with the chunk. This way, if the CSS is already in cache, the new chunk use it.

[yyx990803]

You can do that if you want to, just remove the vue-style-loader argument on these lines: https://github.com/vuejs-templates/webpack/blob/master/template/build/webpack.prod.conf.js#L27-L30

[DarKDinDoN]

Still the same with vue-loader-style removed.

Each chunk contains the required CSS. Even if the CSS code is exactly the same.

[yyx990803]

Oh I guess I misunderstood your last comment. See this section: http://webpack.github.io/docs/stylesheets.html#styles-in-commons-chunk

[DarKDinDoN]

👍 thank you sir !