Webpack - CSS Loader Minification slow

时间:2017-11-17 18:01:52

标签: javascript webpack sass

这是我的webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const nodeExternals = require('webpack-node-externals');

const extract = new ExtractTextPlugin({
    filename: '../css/main.css'
});

module.exports = env => {
    return {
        entry: './src/js/scripts.js',
        output: {
            path: path.resolve(__dirname, 'dist/js'),
            filename: 'bundle.js',
        },
        watch: true,
        watchOptions: {
            poll: true
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                presets: ['env']
                            }
                        }
                    ]
                },
                {
                    test: /\.scss$/,
                    use: extract.extract({
                        use: [
                            {
                                loader: 'css-loader',
                                options: {minimize: env.NODE_ENV === 'prod'}
                            },
                            {
                                loader: 'sass-loader'
                            }
                        ]
                    })
                },
                {
                    test: /\.vue$/,
                    use: ['vue-loader']
                }
            ]
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js'
            }
        },
        plugins: env.NODE_ENV === "dev" ? [
            extract
        ] : [
            extract,
            new UglifyJsPlugin()
        ]
    }
};

这使得我的webpack编译大约需要2秒钟,总共少于10行的JS和SCSS代码组合在一起。在没有最小化的情况下运行它会更快(大约20ms)。

我已经尝试过OptimizeCssAssetsPlugin并且它同样很慢。如果我插入这两行

target: 'node', // in order to ignore built-in modules like path, fs, etc. 
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder 

从此answer再次正常工作,捆绑包会出现此错误 enter image description here

我想从gulp切换到webpack,因为模块化和简单,但这只会使缩小速度慢10倍。 Gulp在不到2秒的时间内缩小了5000多行SCSS代码。任何解决方案?

谢谢!

0 个答案:

没有答案