javascript - webpack 是编译时间很慢

Question

我的 webpack 在启动和发生更改时运行非常缓慢 - 编译。实际上现在开发非常缓慢。我只使用 greensock 作为 vendor ，没有别的。我也只使用了几张图片..不确定。

这是代码:

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作为 vendor ，但没有别的。所以不知道为什么它这么慢。即使当我启动 webpack 时，它的速度也很慢。

Answer 1

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

首先，使用this strategy拆分您的配置文件以用于生产和开发。跟着思路走就好，不要跟着配置走，因为有些配置已经过时了。

您的配置是基于 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)
        })
    ]

};

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