将所有css提取到一个文件中的目的是啥

Posted 2023-03-10

【中文标题】将所有css提取到一个文件中的目的是啥

【英文标题】：what is the intention of extract all css in a single file将所有css提取到一个文件中的目的是什么

【发布时间】：2019-01-20 02:28:54

【问题描述】：

首先，我不明白将所有css提取到一个文件中是什么意思， 这样做有什么好处？ 此外，我尝试使用 webpack4 的 splitChunks 来提取 css，但它会生成一个 js 文件。我想，它不应该是产生一个css文件吗？ 这是我的代码。

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'，这是怎么回事？ 感谢您的帮助；

【参考方案1】：

当你有不同的css文件时，浏览器需要多次请求才能获取所有文件。而且每个请求都需要很长时间，但想象一下浏览器只发出一个请求。

而且当你将所有 css 捆绑到一个文件中时，通常你会省略 css 文件中的冗余空格，基本上你会使文件变得非常小。

Please see this

【讨论】：

但是为什么webpack打包后生成的是js文件，而不是css文件呢？

webpack 负责 css 和 js 的打包和压缩。你应该配置它。

我可以配置 splitChunks 来生成一个 css 文件吗？那怎么配置呢？

【参考方案2】：

这是我的一个项目的 webpack 配置，有了这个配置，你应该能够生成 css 和 js 文件。

对于任何项目都应该足够了。

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = 
    entry: [
        'babel-regenerator-runtime',
        path.resolve(__dirname, 'src')
    ],
    output: 
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/'
    ,
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.DefinePlugin(
            'process.env': 
                NODE_ENV: JSON.stringify('production'),
                WEBPACK: true
            
        ),
        new ExtractTextPlugin(
            filename: 'index.css',
            disable: false,
            allChunks: true
        ),
        new webpack.optimize.UglifyJsPlugin()
    ],
    resolve: 
        extensions: ['.js', '.json', '.jsx'],
    ,
    module: 
        loaders: [
            
                test: /\.jsx?/,
                use: 
                    loader: 'babel-loader'
                ,
                include: path.resolve(__dirname, 'src'),
            ,
            
                test: /\.scss$/,
                use: ExtractTextPlugin.extract(
                    fallback: 'style-loader',
                    use: [
                        loader: 'css-loader',
                        options: 
                            minimize: true
                        
                    , 
                        loader: 'sass-loader',
                        options: 
                            minimize: true
                        
                    ]
                )
            ,
             test: /\.(png|jpg|jpeg|gif|ico)$/, loader: 'url-loader' ,
             test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' ,
             test: /\.(woff|woff2)$/, loader: 'url-loader?prefix=font/&limit=5000' ,
            
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
            ,
             test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' 
        ]
    
;

【讨论】：

很想你，但不是webpack4的config。让我想想。

你的权利。所以我应该更改我的 webpack 版本，让我在将其更改为版本 4 后回复你。

【参考方案3】：

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