Dynamic import builds `.js` and '.css' file. Don't want seperate `.css` file.

What problem does this feature solve?

I have lots of dynamic import in my peoject. Each one builds two files. one is js one is css. However most of css files are too small which results in too many http request.

What does the proposed API look like?

How to config vue.config.js can solve this problem?

Better understanding

[fangbinwei]

If you are using webpack 4, you can extracting-css-based-on-entry according to doc of mini-css-extract-plugin

vue.config.js

/** @type  {import('@vue/cli-service').ProjectOptions} */
module.exports = {
  configureWebpack () {
    function recursiveIssuer (m, c) {
      const issuer = m.issuer

      if (issuer) {
        return recursiveIssuer(issuer, c)
      }

      const chunks = m._chunks
      // For webpack@4 chunks = m._chunks

      for (const chunk of chunks) {
        return chunk.name
      }

      return false
    }
    return {
      optimization: {
        splitChunks: {
          cacheGroups: {
            appStyle: {
              name: 'app_style',
              test: (m, c, entry = 'app') => {
                return m.constructor.name === 'CssModule' &&
                recursiveIssuer(m, c) === entry
              },
              chunks: 'all',
              enforce: true
            }
          }
        }
      }
    }
  }
}

or you can group all css in .vue ,

          cacheGroups: {
            vueStyle: {
              name: 'css-in-vue',
              test: function (module) {
                if (module.constructor.name !== 'CssModule') return false

                if (module.nameForCondition && /.vue$/.test(module.nameForCondition())) {
                  return true
                }
                return false
              },
              chunks: 'all',
              enforce: true
            }
          }

[Edge00]

@fangbinwei 好的，感谢！