Webpack:需要很长时间才能构建

Question

我的反应应用程序中的webpack构建时间存在问题.一切都很好,但需要很长时间.

即使我只更改CSS重建的JavaScript文件？

此外,CSS编译花费的时间比我想象的要长(如果我错了,请纠正我)？

我正在使用16gb的Ram运行Core i7并且构建需要大约一分钟,这在开发过程中变得非常烦人,当它是一行更改而你必须等待足够一分钟才能在浏览器中看到你的更改？

这是错误的方法吗？

const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const path = require('path');
const webpack = require('webpack');

const BUILD_DIR = path.resolve(__dirname, '../dist');
const APP_DIR = path.resolve(__dirname, 'src/');

const config = {
    devtool: 'source-map',
    entry: {
        "ehcp-coordinator": [
            APP_DIR + '/index.js'
        ]
    },

    output: {
        path: `${BUILD_DIR}/js/`,
        filename: '[name].js',
        chunkFilename: '[name]-chunk.js',
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015', 'es2017', 'react', 'stage-0'],
                        plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties', 'syntax-dynamic-import',
                          ["import", {"libraryName": "antd",  "style": false}]]
                    }
                }
            }, {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }]
                })
            }
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': "'development'"
        }),
        new webpack.optimize.UglifyJsPlugin({
            'sourceMap': 'source-map'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: '[name].js',
            minChunks(module, count) {
                var context = module.context;
                return context && context.indexOf('node_modules') >= 0;
            }
        }),
        new ExtractTextPlugin("../css/[name].css")
    ],

    resolve: {
        modules: [
            path.resolve('./'),
            path.resolve('./node_modules'),
        ],
        extensions: ['.js', '.json']
    }

};

module.exports = config;

Answer 1

正如评论中所讨论的,以下是您可以为加速构建所做的最明显的更改:

• UglifyJsPlugin并且ExtractTextPlugin在它们对编译时间的影响方面非常沉重,而实际上并没有在开发中提供许多切实的好处.检查process.env.NODE_ENV您的配置脚本,并根据您是否正在进行生产构建来启用/禁用它们.
  • 代替ExtractTextPlugin,您可以style-loader在开发中使用CSS将HTML注入到HTML页面的头部.这可能会在页面加载时短暂闪现无格式内容(FOUC),但构建起来要快得多.
• 如果您还没有,请使用webpack-dev-server而不仅仅是在监视模式下运行Webpack - 使用开发服务器编译内存中的文件而不是将它们保存到磁盘,这进一步减少了开发中的编译时间.
  • 这意味着当您希望将文件写入磁盘时,您必须手动运行构建,但无论如何您都需要这样做才能切换到生产配置.
• 不确定这是否会对性能产生任何影响,但resolve您的配置部分与默认设置没有明显区别,您应该能够在不引起任何问题的情况下将其删除.