Vue-cli: Dynamic import builds `.js` and '.css' file. Don't want seperate `.css` file.

[Edge00]

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
            }
          }

[fangbinwei]

I update my comment. Close since it can be solved by configuring webpack

[Edge00]

@fangbinwei 大佬，我用您前面给到的这个配置达到了目的，想再进一步请教一下：

cacheGroups: {
  vueStyle: {
    name: 'vue_style',
    test: /.vue$/,
    chunks: 'all',
    enforce: true,
  }
}

这里的 test 用来选中 .vue 文件，为什么刚好是 css 文件合并成了一个包，而 js 文件还是按照原来的处理方式呢？

[fangbinwei]

@Edge00 可能和webpack版本也有关系, 你可以用@vue/cli 5.0.0-alpha.0生产webpack5项目试下, 直接用/.vue$/理论上不对, 划分粒度也比较粗, 不是只针对css的, 还是建议使用之前评论里的配置.

[Edge00]

@fangbinwei 好的，感谢！