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

我的反应应用程序中存在webpack构建时间问题。一切都很好，但需要很长时间。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;

来源

2017-06-13 Kal

我建议在生产中只使用'UglifyJsPlugin'和'ExtractTextPlugin' - 它们在编译时间上相当沉重。另外，我认为你可以完全删除配置文件中的“resolve”部分 - 它看起来与默认值没有多大区别。 –

大多数人往往要么有一个单独的开发和生产配置文件，要么（我的首选）在配置脚本中检查'process.env.NODE_ENV'，以有条件地启用/禁用某些部分。 –

对不起忘了提及这是开发webpack配置不是prod构建一个。不过，为什么只有JS发生了变化才能构建CSS？ – Kal

正如在评论中讨论，在这里你可以做，以加快建设最明显的变化：

UglifyJsPlugin和ExtractTextPlugin是它们对你的编译时间的影响而言非常沉重，而实际上并没有在开发中带来许多实际利益。在您的配置脚本中检查process.env.NODE_ENV，并根据您是否正在制作生成版本来启用/禁用它们。
- 取代ExtractTestPlugin，您可以在开发中使用style-loader将CSS注入HTML页面的头部。当页面加载时，这可能会导致无格式内容（FOUC）的短暂闪现，但构建起来要快得多。
如果你没有准备好，用webpack-dev-server而不仅仅是运行的WebPack在计时模式 - 使用开发服务器编译内存中的文件，而不是将其保存到磁盘，从而进一步降低了编译时间的发展。
- 这确实意味着当您想将文件写入磁盘时，您必须手动运行构建，但无论如何您都需要切换到生产配置。
不知道这对性能产生任何影响，但你的配置的resolve部分不从有意义的默认值不同，你应该能而不引起任何问题，将其删除。

来源

2017-06-13 11:32:10

谢谢，我会尝试在某个点的webpack-dev-server，我们运行我们使用nginx作为代理所以不知道，但其他人肯定会提高构建时间。 – Kal

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

回答

相关问题