Webpack SCSS的编译时间太长

我正在建立一个新的web项目，其中涉及到相当多的SCSS文件。我设置了一个手表，这样每当我更改SCSS文件时，代码都会自动重新编译，这样我就可以刷新页面并查看更改。我的问题是，重新编译代码和查看更改大约需要45秒。我怎样才能解决这个问题

我试着在网上查了几篇文章，但都没有找到解决办法。我对使用webpack相当陌生，所以我不熟悉所有的插件等。我曾尝试关闭源代码映射，但我确实需要这些，这并没有将编译速度提高很多。sass/index.scss的速度似乎在放缓

index.scss

@import '../../wwwroot/lib/materialize/sass/materialize.scss';
@import "../../node_modules/@progress/kendo-theme-material/scss/all";
@import '_customProperties.scss';
@import '_mixins.scss';
@import '_projectVariables.scss';
@import 'common.scss';

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const dirName = 'wwwroot/dist';

module.exports = (env, argv) => {
    return {
        mode: argv.mode === "production" ? "production" : "development",
        entry: {
            mainjs: './src/scripts/index.js',
            maincss: './src/sass/index.scss'
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, dirName)
        },
        devtool: 'source-map',
        module: {
            rules: [
                {
                    test: /\.s[c|a]ss$/,
                    use:
                        [
                            'style-loader',
                            MiniCssExtractPlugin.loader,
                            'css-loader?sourceMap',
                            {
                                loader: 'postcss-loader?sourceMap',
                                options: {
                                    sourceMap: 'inline',
                                    minimize: true,
                                    config: {
                                        ctx: {
                                            env: argv.mode
                                        }
                                    }
                                }
                            },
                            { loader: 'sass-loader', options: { sourceMap: true } }
                        ]
                },
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(),
            new FixStyleOnlyEntriesPlugin(),
            new MiniCssExtractPlugin({
                filename: '[name].css'
            })
        ]
    };
};

module.exports = ({ options }) => {
    //const plugins = [];
    if (options.env === 'production') plugins.push(require('cssnano'));
    return {
        plugins: {
            'postcss-property-lookup': {},
            'postcss-short': {},
            autoprefixer: {}
        }
    };
};

postss.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const dirName = 'wwwroot/dist';

module.exports = (env, argv) => {
    return {
        mode: argv.mode === "production" ? "production" : "development",
        entry: {
            mainjs: './src/scripts/index.js',
            maincss: './src/sass/index.scss'
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, dirName)
        },
        devtool: 'source-map',
        module: {
            rules: [
                {
                    test: /\.s[c|a]ss$/,
                    use:
                        [
                            'style-loader',
                            MiniCssExtractPlugin.loader,
                            'css-loader?sourceMap',
                            {
                                loader: 'postcss-loader?sourceMap',
                                options: {
                                    sourceMap: 'inline',
                                    minimize: true,
                                    config: {
                                        ctx: {
                                            env: argv.mode
                                        }
                                    }
                                }
                            },
                            { loader: 'sass-loader', options: { sourceMap: true } }
                        ]
                },
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(),
            new FixStyleOnlyEntriesPlugin(),
            new MiniCssExtractPlugin({
                filename: '[name].css'
            })
        ]
    };
};

module.exports = ({ options }) => {
    //const plugins = [];
    if (options.env === 'production') plugins.push(require('cssnano'));
    return {
        plugins: {
            'postcss-property-lookup': {},
            'postcss-short': {},
            autoprefixer: {}
        }
    };
};

这是生成的输出：

40% building 6/7 modules 1 active ...n\source\repos\xxx\zzz\src\sass\index.scss

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
<w> [webpack.Progress] 32560ms building
<i> [webpack.Progress] 44ms hashing
90% chunk assets processingwebpack-fix-style-only-entries: removing js from style only module: maincss.js
<i> [webpack.Progress] 366ms after chunk asset optimization
<i> [webpack.Progress] 44ms emitting
<i> [webpack.Progress] 30ms after emitting
Hash: e558a3c9fab35e54c78c
Version: webpack 4.39.2
Time: 33064ms
Built at: 09/09/2019 11:32:48 AM
          Asset      Size   Chunks             Chunk Names
    maincss.css   770 KiB  maincss  [emitted]  maincss
maincss.css.map  1.78 MiB  maincss  [emitted]  maincss
      mainjs.js  63.8 KiB   mainjs  [emitted]  mainjs
  mainjs.js.map  72.7 KiB   mainjs  [emitted]  mainjs
Entrypoint mainjs = mainjs.js mainjs.js.map
Entrypoint maincss = maincss.css maincss.css.map
[./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js?sourceMap!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./src/sass/index.scss] ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js?sourceMap!./node_modules/postcss-loader/src??ref--4-3!./node_modules/sass-loader/lib/loader.js??ref--4-4!./src/sass/index.scss 39 bytes {maincss} [built]
    [./src/sass/index.scss] 212ms -> factory:894ms building:32328ms = 33434ms
[./src/sass/index.scss] 590 bytes {maincss} [built]
    factory:149ms building:63ms = 212ms
[./src/scripts/common.js] 91 bytes {mainjs} [built]
    [./src/scripts/index.js] 1117ms -> factory:255ms building:69ms = 1441ms
[./src/scripts/index.js] 182 bytes {mainjs} [built]
    factory:61ms building:1056ms = 1117ms
[./src/scripts/person.js] 1.14 KiB {mainjs} [built]
    [./src/scripts/index.js] 1117ms -> factory:255ms building:69ms = 1441ms
    + 3 hidden modules
Child mini-css-extract-plugin ../../xxx\zzz\node_modules\css-loader\dist\cjs.js?sourceMap!../../xxx\zzz\node_modules\postcss-loader\src\index.js??ref--4-3!../../xxx\zzz\node_modules\sass-loader\lib\loader.js??ref--4-4!../../xxx\zzz\src\sass\index.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js?sourceMap!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./src/sass/index.scss] ./node_modules/css-loader/dist/cjs.js?sourceMap!./node_modules/postcss-loader/src??ref--4-3!./node_modules/sass-loader/lib/loader.js??ref--4-4!./src/sass/index.scss 2.59 MiB {mini-css-extract-plugin} [built]
        factory:3ms building:32184ms = 32187ms
        + 1 hidden module

40%构建6/7模块1活动…n\source\repos\xxx\zzz\src\sass\index.scss
您没有设置任何插件、解析器或字符串生成器。现在，PostSS什么都不做。为你的案例选择插件https://www.postcss.parts/ 并在postss.config.js中使用它们。
[网页进度]32560ms大楼
[webpack.Progress]44ms哈希
90%区块资产处理网页包修复仅样式条目：从仅样式模块中删除js:maincss.js
区块资产优化后的[webpack.Progress]366ms
[网页进度]44毫秒
[网页进度]发射后30毫秒
散列：e558a3c9fab35e54c78c
版本：网页4.39.2
时间：33064ms
建造时间：2019年9月9日上午11:32:48
资产大小块块名称
maincss.css 770 KiB maincss[emissed]maincss
maincss.css.map 1.78 MiB maincss[emissed]maincss
mainjs.js 63.8 KiB mainjs[emissed]mainjs
mainjs.js.map 72.7 KiB mainjs[emissed]mainjs
入口点mainjs=mainjs.js mainjs.js.map
入口点maincss=maincss.css maincss.css.map
[./node_modules/mini css extract plugin/dist/loader.js./node_modules/css loader/dist/cjs.js？sourceMap./node_modules/postss loader/src/index.js？！。/node_modules/sass/index.scss./mini css extract plugin/dist/loader.js/node_modules/css loader/dist/cjs.js？sourceMap/节点\模块/postss加载器/src？？参考-4-3/node_modules/sass loader/lib/loader.js？？ref--4-4/src/sass/index.scss 39字节{maincss}[builded]
[/src/sass/index.scss]212ms->工厂：894ms建筑：32328ms=33434ms
[./src/sass/index.scss]590字节{maincss}[builded]
工厂：149ms建筑：63ms=212ms
[./src/scripts/common.js]91字节{mainjs}[builded]
[/src/scripts/index.js]1117ms->工厂：255ms建筑：69ms=1441ms
[./src/scripts/index.js]182字节{mainjs}[builded]
工厂：61ms建筑：1056ms=1117ms
[./src/scripts/person.js]1.14 KiB{mainjs}[builded]
[/src/scripts/index.js]1117ms->工厂：255ms建筑：69ms=1441ms
+3隐藏模块
子迷你css提取插件.././xxx\zzz\node_modules\css loader\dist\cjs.js？sourceMap！..//xxx\zzz\node\u modules\postss loader\src\index.js？？ref--4-3！//xxx\zzz\node\u modules\sass loader\lib\loader.js？？ref--4-4！//xxx\zzz\src\sass\index.scss：
入口点迷你css提取插件=*
[./node_modules/css loader/dist/cjs.js？sourceMap！。/node_modules/postss loader/src/index.js？！。/node_modules/sass loader/lib/loader.js？！。/src/sass/index.scss]。/node_modules/css loader/dist/cjs？sourceMap/节点\模块/postss加载器/src？？参考-4-3/node_modules/sass loader/lib/loader.js？？ref--4-4/src/sass/index.scss 2.59 MiB{mini-css-extract-plugin}[内置]
工厂：3ms建筑：32184ms=32187ms
+1隐藏模块