使用 material.io 时，使用 scss-loader 构建 Webpack 速度很慢

问题描述

我有一个 global.scss 文件，它使用以下方法引入所有 material.ui scss：

@use "~material-components-web/material-components-web";

材料编译时间：

无素材编译时间：

显然这包括了相当多的 scss，但是这个 scss 是静态的，在构建之间不会改变，所以我认为 webpack 的缓存会提高这个速度。是否有我缺少的配置？开始包含每个组件的材质样式而不是所有内容的正确解决方案是什么？

这是我的 webpack.config（注意，我对设置 webpack 还很陌生，如果我遗漏了一些明确的开发优化，请随时指出！）：

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

module.exports = {
    entry() {
        const entryObj = glob.sync('./src/js/**/*.js',{ dependOn: 'test' }).reduce((acc,path) => {
            const actPath = path.replace(/\.\/src\/.*?\//,'').replace(/\.js/,'');
            acc[actPath] = {
                import: path,fileName: path,dependOn: dependencies
            }
            return acc
        },{});
        entryObj[dependencies].dependOn = '';
        console.log(entryObj);
        return entryObj;
    },output: {
        filename: '[name].js',path: path.resolve(__dirname,'..','wwwroot','dist')
    },devtool: 'source-map',mode: 'development',module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,exclude: /node_modules/,use: [
                    MiniCssExtractPlugin.loader,// Translates CSS into CommonJS
                    {
                        loader: "css-loader",options: {
                            sourceMap: false
                        },},// Compiles Sass to CSS
                    {
                        loader: "sass-loader",options: {
                            sourceMap: false,webpackImporter: true,sassOptions: {
                                implementation: require('dart-sass'),}
                ],]
    },optimization: {
        minimize: true,minimizer: [
            // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`),uncomment the next line
            // `...`,new CssMinimizerPlugin({
                sourceMap: true,}),],plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: '[name].css',]
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）