WebPack aşırı yavaş

Question

I + reaksiyona webpack + daktilo kullanmak oluşturmak.

webpack.config.js geçerli:

var webpack = require('webpack'); 
var path = require('path'); 
var node_modules_dir = path.join(__dirname, 'node_modules'); 

var deps = [ 
    'react/react.js', 
    'react-dom/react-dom.js', 
]; 

var config = { 
    devtool: 'source-map', 
    context: __dirname + '/Scripts/ts', 
    entry: { 
     server: "./server.js", 
     client: "./client.ts" 
    }, 
    output: { 
     path: path.resolve(__dirname, "Scripts/public/"), 
     filename: '[name].bundle.js' 
    }, 
    resolve: { 
     alias: {}, 
     modulesDirectories: ["node_modules"], 
     extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'] 
    }, 
    module: { 
     noParse: [], 

     // Use the expose loader to expose the minified React JS 
     // distribution. For example react-router requires this 
     loaders: [ { 
      test: /\.ts(x?)$/, 
      exclude: /(node_modules|bower_components)/, 
      loader: 'babel-loader?presets[]=es2015&presets[]=react!ts-loader' 
     }, 
     { 
      test: path.resolve(node_modules_dir, deps[0]), 
      loader: "expose?React" 
     }, 
     ] 
    }, 
    watch: true 
}; 

deps.forEach(function (dep) { 
    var depPath = path.resolve(node_modules_dir, dep); 
    config.resolve.alias[dep.split(path.sep)[0]] = depPath; 
    config.module.noParse.push(depPath); 
}); 

module.exports = config; 

Sorunum hızını inşa ederiz. İlk işlem yaklaşık 25s ve artımlı - 5-6 s sürer. sonucu:

webpack --profile --display-modules 

geçerli:

ts-loader: Using typescript@1.8.0-dev.20160104 and C:\Users\rylkov.i\Documents\Visual Studio 2013\Projects\react_test_app\react_test_app\tsconfig.json 
Hash: d6d85b30dfc16f19f4a6 
Version: webpack 1.12.9 
Time: 25547ms 
       Asset  Size Chunks    Chunk Names 
    client.bundle.js 1.14 MB  0 [emitted] client 
    server.bundle.js 1.14 MB  1 [emitted] server 
client.bundle.js.map 1.31 MB  0 [emitted] client 
server.bundle.js.map 1.31 MB  1 [emitted] server 
    [0] ./client.ts 80 bytes {0} [built] 
     factory:38ms building:21905ms dependencies:1ms = 21944ms 
    [0] ./server.js 70 bytes {1} [built] 
     factory:14ms building:19ms = 33ms 
    [1] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/expose-loader?Components!./components/index.js 179 bytes {0} {1} [built] 
     [0] 33ms -> factory:2078ms building:8ms = 2119ms 
    [2] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/index.js 210 bytes {0} {1} [built] 
     [0] 33ms -> [1] 2086ms -> factory:19832ms building:4ms = 21955ms 
    [3] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/main.tsx 4.78 kB {0} {1} [built] 
     [0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:26ms building:331ms dependencies:1ms = 22313ms 
    [4] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react/react.js 172 bytes {0} {1} [built] 
     [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [3] 357ms -> factory:315ms building:0ms = 22627ms 
    [5] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react/react.js 641 kB {0} {1} [built] 
     [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [3] 357ms -> [4] 315ms -> factory:1ms building:86ms = 22714ms 
    [6] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/todoItem.tsx 2.81 kB {0} {1} [built] 
     [0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:28ms building:576ms dependencies:70ms = 22629ms 
    [7] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/selectControl.tsx 3.44 kB {0} {1} [built] 
     [0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:27ms building:428ms dependencies:218ms = 22628ms 
    [8] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react-dom/react-dom.js 1.17 kB {0} {1} [built] 
     [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> factory:215ms building:4ms = 22629ms 
    [9] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/selectItem.tsx 2.63 kB {0} {1} [built] 
     [0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:28ms building:502ms dependencies:144ms = 22629ms 
    [10] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/imports-loader?$=jquery!C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ui-select.js 99.6 kB {0} {1} [built] 
     [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> factory:150ms building:145ms = 22705ms 
    [11] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/jquery/dist/jquery.js 348 kB {0} {1} [built] 
     [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> [10] 295ms -> factory:10ms building:211ms = 22926ms 

bu son derece yavaş olduğunu düşünüyorum. Ekstra gerektiren olmadan react.js ve tepki-dom.js zaten js dosyaları derlenmektedir. Bileşenlerim basit örneklerdir. WebPack ile Bir daha sorun: config

watch:true 

özellik. Her zaman değil çalışır neden anlayamıyorum. Ama belki de bu yavaş yapım sürecidir. Teşekkürler!

Answer 1

Sen deneyebilirsiniz:

devtool: 'eval', 

Bu oldukça büyük bir dosya üretmek ancak yarı zamanda olacaktır. Üretim için tavsiye edilmez.

Answer 2

Sen jQuery ve React donatılacak olan. Paketinizin boyutunu azaltmak ve oluşturmak için harcayacağı süreyi en aza indirmek için, bunları harici paket olarak web paketi yapılandırmasında ve bunları bir CDN aracılığıyla eşzamansız olarak yüklemenizi öneririz.

Örnek webpack dış görünüş:

externals: { 
    react: 'React', 
    jquery: 'jQuery' 
}