Webpack编译时间非常缓慢

Question

Webpack编译时间非常缓慢

10

我的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，它也非常慢。

因此，这里的问题尚不清楚，但编译时间非常缓慢-仅使用Greensock作为供应商，但没有其他内容。因此，不确定为什么会这么慢。即使我启动Webpack，它也非常慢。

- Harpreet

开始移除 extract-text-webpack-plugin，因为它不兼容 webpack 4，在入口点中删除 vendorlibs，让 webpack 在缓存组（vendors）上处理它。对于生产环境来说，你不应该在 bundle 上启用 HotModuleReplacement，并添加一个 mode: production。 - PlayMa256

好的，谢谢。我对webpack还很陌生，那你提到的上述内容我该怎么做呢？ - Harpreet

MiniCssExtractPlugin是可兼容的，可以用来替代extract-text-webpack-plugin，但它仍然会拖慢开发服务器的速度。也许唯一的解决方案是只在生产环境中使用它们，而不是在开发环境中使用。 - Goran_Ilic_Ilke

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PlayMa256 · Accepted Answer

Webpack 4版本带来了巨大的速度提升。

首先，使用这个策略来分离你的生产和开发环境的配置文件。只需遵循这个思路，不要按照配置文件进行操作，因为其中一些已经过时了。

你的配置是基于Webpack 4的新配置架构，所以我会对基本配置进行一些微调，并使用我链接的策略来分离它们。

第一步：安装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)
        })
    ]

};

请尝试这个并告诉我结果。