在单个文件中提取所有 css 的目的是什么 [英] what is the intention of extract all css in a single file

问题描述

首先，我不明白在单个文件中提取所有css是什么意思，这样做的好处是什么?此外，我尝试使用 webpack4 的 splitChunks 来提取 css，但它生成了一个 js 文件.我认为，它不应该产生一个 css 文件?这是我的代码.

First, I don't understand what is the meaning for extract all css in a single file, and What's the profit of doing that? Moreover, I try use splitChunks of webpack4 to extract css but it is produced a js files. I think, it is not supposed to be produces a css files? this is my code.

splitChunks: {
  cacheGroups:{
    vendors: {
      test: /\.js$/g,
      chunks: 'all',
      name: 'vendors',
      minChunks: 1,
      minSize: 1
    },
    styles: {
      test: /\.less$/g,
      chunks: 'all',
      name: 'styles',
      minChunks: 1,
      minSize: 1,
      enforce: true
    }
  }
}

结束这段代码产生了'vendors.js'和'styles.js'，这是怎么回事?感谢您的帮助；

ending this code produced a 'vendors.js' and 'styles.js', How come this? thanks for your help;

推荐答案

将多个小的css文件打包在一起很好，可以减少请求量...
但是，在使用 antd 时使用 splitChunks>cacheGroups>styles 似乎很糟糕，看起来像splitChunk 破坏了 antd css 的动态导入，当你打开你的页面时，它会加载所有的 antd css，即使你在当前页面中没有使用

It's good to package multiple small css file together, it can reduce the request amount...
However, it seems terrible to use splitChunks>cacheGroups>styles when you are using antd, it looks like the splitChunk broke the dynamic import of the antd css, and when you open your page, it loads all antd css even you don't use in the current page

这篇关于在单个文件中提取所有 css 的目的是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！