面试题：Webpack下复杂CSS预处理器的性能优化

Webpack配置优化

代码拆分：

使用splitChunks插件，将公共的CSS代码提取到单独的文件中。例如：

module.exports = {
    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name:'styles',
                    test: /\.less$/,
                    chunks: 'all',
                    enforce: true
                }
            }
        }
    }
};

这样可以避免重复的CSS代码在多个文件中出现，减小整体体积。

开启压缩：

使用mini - css - extract - plugin结合css - minimizer - webpack - plugin来压缩CSS文件。首先安装插件：

npm install mini - css - extract - plugin css - minimizer - webpack - plugin --save - dev

然后在Webpack配置中添加：

const MiniCssExtractPlugin = require('mini - css - extract - plugin');
const CssMinimizerPlugin = require('css - minimizer - webpack - plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css - loader', 'less - loader']
            }
        ]
    },
    optimization: {
        minimizer: [
            new CssMinimizerPlugin()
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
};

优化Loader配置：

对less - loader设置合理的缓存，在Webpack配置的less - loader中添加cacheDirectory: true，如下：

module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css - loader', {
                    loader: 'less - loader',
                    options: {
                        cacheDirectory: true
                    }
                }]
            }
        ]
    }
};

这样在后续构建中，如果Less文件没有变化，就可以直接使用缓存，加快构建速度。

优化解析：
- 设置resolve.modules来指定Webpack查找模块的目录，减少不必要的查找范围。例如：
```
module.exports = {
    resolve: {
        modules: [path.resolve(__dirname, 'node_modules')]
    }
};
```
还可以设置resolve.extensions，优先解析常用的文件扩展名，避免Webpack尝试多种扩展名查找：
```
module.exports = {
    resolve: {
        extensions: ['.less', '.css']
    }
};
```

Less预处理器设置调整

优化导入策略：
- 检查Less文件中的导入语句，避免不必要的嵌套导入。尽量将公共的Less变量、Mixins等提取到一个单独的文件中，然后在其他文件中统一导入。例如，将公共变量放在variables.less中：
```
// variables.less
@primary - color: #1890ff;

// main.less
@import 'variables.less';
body {
    background - color: @primary - color;
}
```
避免过度嵌套：
- 在Less中，过度的嵌套会增加生成CSS的复杂度和体积。尽量保持合理的嵌套层级，例如：
```
// 不好的示例
```

.nav { ul { li { a { color: #000; &:hover { color: #f00; } } } } }

// 优化后 .nav { color: #000; &:hover { color: #f00; } }

3. **启用Less的优化选项**：
- 在`less - loader`的`options`中可以启用Less的优化功能，例如：
```javascript
module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css - loader', {
                    loader: 'less - loader',
                    options: {
                        optimize: true
                    }
                }]
            }
        ]
    }
};

启用optimize选项后，Less会对生成的CSS进行一些优化，如合并重复的选择器等，减小文件体积。

面试题：Webpack下复杂CSS预处理器的性能优化

知识考点

面试题答案

Webpack配置优化

Less预处理器设置调整