Javascript 网页包：构建需要很长时间

我的react应用程序中的网页包生成时间有问题。一切都很好，但需要很长时间

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

而且CSS编译花费的时间比我认为的要长（如果我错了，请纠正我）

我正在运行一个具有16gb内存的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;

---

正如评论中所讨论的，以下是您为加快构建速度所做的最明显的更改：

• UglifyJsPlugin

  和

  ExtractTextPlugin

  对编译时间的影响非常大，但实际上并没有在开发中带来很多实际好处。检查配置脚本中的

  process.env.NODE\u env

  ，并根据是否正在进行生产构建来启用/禁用它们。
  • 代替

    ExtractTextPlugin

    ，您可以在开发中使用

    style loader

    ，将CSS注入HTML页面的头部。当页面加载时，这可能会导致未设置样式的内容（FOUC）短暂闪烁，但构建速度要快得多
• 如果您还没有，请使用

  webpack dev server

  ，而不是仅在监视模式下运行webpack-使用dev服务器在内存中编译文件，而不是将其保存到磁盘，这将进一步减少开发中的编译时间。
  • 这意味着，当您希望将文件写入磁盘时，必须手动运行构建，但无论如何，您都需要这样做才能切换到生产配置
• 不确定这是否会对性能产生任何影响，但配置的

  resolve

  部分与默认设置没有明显区别，您应该能够在不引起任何问题的情况下删除它

---

在我的例子中，我将

devtool

属性更新为

false

关于介质的文章：

我必须用SSR解决我的React应用程序（）的相同问题。SSR会让事情变得复杂，但幸运的是，如果指定

--mode=development

，webpack会更快，因为它在内存中完成

webpack dev服务器不适用于我，因为我需要client.js捆绑包才能使SSR客户端正常工作。以下是我的设置：

webpack.config.js:

const path = require('path');

module.exports = {
    entry: {
        client: './src/client.js',      // client side companion for SSR
        // bundle: './src/bundle.js',      // Pure client side app
    },
    output: {
        path: path.resolve(__dirname, 'assets'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                loader: "babel-loader",
                options: {
                    presets: [
                        '@babel/preset-env',
                        {'plugins': ['@babel/plugin-proposal-class-properties']},
                    ],
                }
            }
        ]
    },
    watchOptions: {
        aggregateTimeout: 1000,
        poll: 500,
        ignored: /node_modules/,
    }
};

  "scripts": {
    // IMP: --mode=development
    "run-dev-ssr": "webpack --config webpack.config.js --watch --mode=development & babel src -d dist --watch & browser-refresh dist/server.js"
  }

node_modules/
static/
.cache/
.*
*.marko.js
*.dust.js
*.coffee.js

.git/

# Add these files to ignore, since webpack is storing the compiled output to assets/ folder
src/
dist/

package.json:

const path = require('path');

module.exports = {
    entry: {
        client: './src/client.js',      // client side companion for SSR
        // bundle: './src/bundle.js',      // Pure client side app
    },
    output: {
        path: path.resolve(__dirname, 'assets'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                loader: "babel-loader",
                options: {
                    presets: [
                        '@babel/preset-env',
                        {'plugins': ['@babel/plugin-proposal-class-properties']},
                    ],
                }
            }
        ]
    },
    watchOptions: {
        aggregateTimeout: 1000,
        poll: 500,
        ignored: /node_modules/,
    }
};

  "scripts": {
    // IMP: --mode=development
    "run-dev-ssr": "webpack --config webpack.config.js --watch --mode=development & babel src -d dist --watch & browser-refresh dist/server.js"
  }

node_modules/
static/
.cache/
.*
*.marko.js
*.dust.js
*.coffee.js

.git/

# Add these files to ignore, since webpack is storing the compiled output to assets/ folder
src/
dist/

。浏览器刷新忽略：

const path = require('path');

module.exports = {
    entry: {
        client: './src/client.js',      // client side companion for SSR
        // bundle: './src/bundle.js',      // Pure client side app
    },
    output: {
        path: path.resolve(__dirname, 'assets'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                loader: "babel-loader",
                options: {
                    presets: [
                        '@babel/preset-env',
                        {'plugins': ['@babel/plugin-proposal-class-properties']},
                    ],
                }
            }
        ]
    },
    watchOptions: {
        aggregateTimeout: 1000,
        poll: 500,
        ignored: /node_modules/,
    }
};

  "scripts": {
    // IMP: --mode=development
    "run-dev-ssr": "webpack --config webpack.config.js --watch --mode=development & babel src -d dist --watch & browser-refresh dist/server.js"
  }

node_modules/
static/
.cache/
.*
*.marko.js
*.dust.js
*.coffee.js

.git/

# Add these files to ignore, since webpack is storing the compiled output to assets/ folder
src/
dist/

无模式的生成时间：

Hash: 81eff31301e7cb74bffd
Version: webpack 4.29.5
Time: 4017ms
Built at: 05/10/2019 9:44:10 AM

Hash: 64e10f26caf6fe15068e
Version: webpack 4.29.5
Time: 2548ms


Time: 5680ms
Time: 11343ms

使用模式的生成时间：

Hash: 27eb1aabe54a8b995d67
Version: webpack 4.29.5
Time: 4410ms

Time: 262ms

Time: 234ms

Time: 162ms

---

我建议只在生产环境中使用

UglifyJsPlugin

和

ExtractTextPlugin

——它们的编译时间相当长。此外，我认为您可以完全删除配置中的

resolve

部分-它似乎与默认设置没有什么不同。大多数人倾向于使用单独的开发和生产配置文件，或者（我的首选）选中配置脚本中的

process.env.NODE\u env

，有条件地启用/禁用某些部分。很抱歉，忘了提及这是dev webpack配置，而不是prod build配置。还有，如果说只有JS发生了变化，为什么还要构建CSS？你可以继续使用

less-loader

和

CSS-loader

，只需在开发中将它们输入

style-loader

。这会在运行时将CSS注入页面的头部，而不是将其放在单独的文件中。此外，如果您还没有，请使用

webpack dev server

，而不是仅在监视模式下运行webpack-使用dev server在内存中编译文件，而不是将其保存到磁盘，这进一步减少了开发中的编译时间。这意味着您必须在想要输出文件时手动运行生成，但您仍然需要这样做才能切换到生产配置。谢谢，我会在某个时候尝试webpack dev服务器，我们使用nginx作为代理运行我们的生成，所以不确定，但其他人肯定会缩短生成时间。