javascript webpack 编译时间很慢

webpack is compile time is very slow

提问by Harpreet

My webpack is going very slow when it starts and when theres a change - compiling. Actually making development very slow right now. I'm only using greensock as the vendor but nothing else. I'm using only a few images too.. not sure.

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

Here is the code:

这是代码：

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)

        })
    ]

};

Here is the package.json scripts:

这是 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"
  }

So, not sure what is wrong here but compile time is very slow - using greensock as vendor but nothing else.. So not sure why its so slow. Even when I start webpack its brutal slow.

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

采纳答案by PlayMa256

Webpack version 4 came with a huge speed imporvements.

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

First, use this strategyto split your config files for production and for development. Just follow the idea, don't follow the configurations because some of them are outdated.

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

Your config is the new config schema, based on webpack 4, só i'm going to do some tweaks to the basic one, and you can split them using the strategy i've linked.

您的配置是基于 webpack 4 的新配置架构，因此我将对基本配置进行一些调整，您可以使用我链接的策略拆分它们。

First: install mini-css-extract-plugin.

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

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

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

const cssProd = [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'];

const cssConfig = isProd ? cssProd : cssDev;

// content hash is better for production which helps increasing cache.
// contenthash is the hash generated given the content of the file, so this is going to change only if the content changed.
const outputFilename = isProd ? '[name].[contenthash].js' : 'name.[hash].js';

module.exports = {
    entry: './src/js/index.js',

        output: {
            // dist folder is by default the output folder
      filename: outputFilename
        },

        // this should go into the webpack.dev.js
    devServer: {
        //contentBase: path.join(__dirname, "/dist"),
        compress: true,
        port: 3000,
        hot: true,
        stats: "errors-only",
        open: true
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                            commons: {
                                    // this takes care of all the vendors in your files
                                    // no need to add as an entrypoint.
                    test: /[\/]node_modules[\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    },
    module:{
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use:[MiniCssExtractPlugin.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 MiniCssExtractPlugin({
            filename: 'app.css',
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        })
    ]

};

Try this one and let me know what you got.

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