webpack 编译时间很慢

Question

我的 webpack 在启动和发生变化时运行速度非常慢 - 编译。实际上现在开发非常缓慢。我只使用 greensock 作为供应商，但没有别的。我也只使用了几张图片……不确定。

这是代码：

const path = require('path');
var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

// const ASSET_PATH = process.env.ASSET_PATH || '/'; ,
//publicPath: '/dist'

var isProd = process.env.NODE_ENV === 'production';
var cssDev = ['style-loader', 'css-loader', 'sass-loader'];

const VENDOR_LIBS =['gsap'];

var cssProd = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
        'css-loader', 'sass-loader'
    ],
    publicPath: '/dist'
});

var cssConfig = isProd ? cssProd : cssDev;

module.exports = {
    entry: {
        index: './src/js/index.js',
        vendor: VENDOR_LIBS
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash].js'
    },
    devServer: {
        //contentBase: path.join(__dirname, "/dist"),
        compress: true,
        port: 3000,
        hot: true,
        stats: "errors-only",
        open: true
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    },
    module:{
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use:[
                     "style-loader" , "css-loader"
                    ]
            },
            {
                test: /\.scss$/,
                use: cssConfig
            },
            {
                test: /\.pug$/,
                use: ['html-loader', 'pug-html-loader']
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: ['file-loader?name=[name].[ext]&outputPath=images/&publicPath=images/',
                        'image-webpack-loader'
                     ]
            },
            {
                test: /\.(eot|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                use: 'file-loader?name=[name].[ext]&outputPath=fonts/&publicPath=fonts/'
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            title: '',
            template: './src/index.html',
            minify: {
                collapseWhitespace: true
            },
            hash: true,
            inject: true
       }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new ExtractTextPlugin({
            filename: 'app.css',
            disable: !isProd,
            allChunks: true
        }),
        new webpack.DefinePlugin({

            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)

        })
    ]

};

这是 package.json 脚本：

"scripts": {
    "killallProcesses": "killall node && webpack-dev-server",
    "start": "webpack-dev-server",
    "dev": "webpack -d",
    "prod": "npm run clean && NODE_ENV=production webpack -p",
    "clean": "rimraf ./dist/* ",
    "deploy-gh": "npm run prod && git subtree push --prefix dist origin gh-pages"
  }

所以，不确定这里有什么问题，但编译时间很慢 - 使用 greensock 作为供应商，但没有别的。所以不知道为什么它这么慢。即使当我启动 webpack 时，它的速度也很慢。

Answer 1

Webpack 版本 4 带来了巨大的速度改进。

\n\n

首先，使用此策略来拆分配置文件以用于生产和开发。只要遵循这个想法，不要遵循配置，因为其中一些已经过时了。

\n\n

您的配置是新的配置模式，基于 webpack 4，s\xc3\xb3 我将对基本模式进行一些调整，您可以使用我链接的策略来拆分它们。

\n\n

第一：安装mini-css-extract-plugin.

\n\n

const path = require(\'path\');\nconst webpack = require(\'webpack\');\nconst htmlWebpackPlugin = require(\'html-webpack-plugin\');\nconst MiniCssExtractPlugin = require(\'mini-css-extract-plugin\');\n\nconst isProd = process.env.NODE_ENV === \'production\';\nconst cssDev = [\'style-loader\', \'css-loader\', \'sass-loader\'];\n\nconst cssProd = [MiniCssExtractPlugin.loader, \'css-loader\', \'sass-loader\'];\n\nconst cssConfig = isProd ? cssProd : cssDev;\n\n// content hash is better for production which helps increasing cache.\n// contenthash is the hash generated given the content of the file, so this is going to change only if the content changed.\nconst outputFilename = isProd ? \'[name].[contenthash].js\' : \'name.[hash].js\';\n\nmodule.exports = {\n    entry: \'./src/js/index.js\',\n\n        output: {\n            // dist folder is by default the output folder\n      filename: outputFilename\n        },\n\n        // this should go into the webpack.dev.js\n    devServer: {\n        //contentBase: path.join(__dirname, "/dist"),\n        compress: true,\n        port: 3000,\n        hot: true,\n        stats: "errors-only",\n        open: true\n    },\n    optimization: {\n        splitChunks: {\n            cacheGroups: {\n                            commons: {\n                                    // this takes care of all the vendors in your files\n                                    // no need to add as an entrypoint.\n                    test: /[\\\\/]node_modules[\\\\/]/,\n                    name: \'vendors\',\n                    chunks: \'all\'\n                }\n            }\n        }\n    },\n    module:{\n        rules: [\n            {\n                test: /\\.js$/,\n                exclude: /node_modules/,\n                use: \'babel-loader\'\n            },\n            {\n                test: /\\.css$/,\n                use:[MiniCssExtractPlugin.loader, \'css-loader\']\n            },\n            {\n                test: /\\.scss$/,\n                use: cssConfig\n            },\n            {\n                test: /\\.pug$/,\n                use: [\'html-loader\', \'pug-html-loader\']\n            },\n            {\n                test: /\\.(jpe?g|png|gif|svg)$/i,\n                use: [\'file-loader?name=[name].[ext]&outputPath=images/&publicPath=images/\',\n                        \'image-webpack-loader\'\n                     ]\n            },\n            {\n                test: /\\.(eot|ttf|woff|woff2)(\\?v=\\d+\\.\\d+\\.\\d+)?$/,\n                use: \'file-loader?name=[name].[ext]&outputPath=fonts/&publicPath=fonts/\'\n            }\n        ]\n    },\n    plugins: [\n        new htmlWebpackPlugin({\n            title: \'\',\n            template: \'./src/index.html\',\n            minify: {\n                collapseWhitespace: true\n            },\n            hash: true,\n            inject: true\n       }),\n        new webpack.HotModuleReplacementPlugin(),\n        new webpack.NamedModulesPlugin(),\n        new MiniCssExtractPlugin({\n            filename: \'app.css\',\n        }),\n        new webpack.DefinePlugin({\n            \'process.env.NODE_ENV\': JSON.stringify(process.env.NODE_ENV)\n        })\n    ]\n\n};\n

\n\n

试试这个，让我知道你得到了什么。

\n