2016-05-31 10 views
0

私はReactJS TutorialsからReactとWebpackを学ぼうとしています。 私の問題は、すべてのファイルのトップレベルディレクトリからwebpackを実行したときです。通常は約62392msです。しかし、チュートリアルでは、彼は1394msをとります。私はを除いて、がパフォーマンス時間を増やすのに役立つはずだと読んだが、私は既にnode_modulesを除外している。私はちょうどバベルに私のローダーを切り替え試みた、それがダウン13183msに私WebPACKの時間をもたらしたが、それはまだそれが唯一のファイル(client.js)をtranspilingだ場合は特に、ひどく遅いようです。なぜwebpackコマンドを実行するのが遅いのか分かっている人はいますか?他のstackoverflowの答えのほとんどがパス/ディレクトリをインクルード/除外するように見えています。node_modulesを除外してもWebpackコマンドが時間がかかるのはなぜですか?

マイファイル構造は以下の通りです:

node_modules 
src 
-> js 
->-> client.js 
-> client.min.js 
-> index.html 
.gitignore 
package.json 
webpack.config.js 

私webpack.config.jsは、次のようになります。

var debug = process.env.NODE_ENV !== "production"; 
var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    context: __dirname + "/src", 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: "./js/client.js", 
    module: { 
    loaders: [ 
     { 
     target: 'node', 
     test: /\.jsx?$/, 
     //include: [path.resolve(__dirname, "./src")], 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], 
     } 
     } 
    ] 
    }, 
    output: { 
    path: __dirname + "/src/", 
    filename: "client.min.js" 
    }, 
    plugins: debug ? [] : [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    ], 
}; 

そして、私のpackage.jsonは以下のようになります。

{ 
    "name": "module-loaders", 
    "version": "1.0.0", 
    "description": "Learning React and Webpack through LearnCode.academy", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "git+https://github.com/dustinchang/React_Learning_LearnCode.Academy.git" 
    }, 
    "author": "", 
    "license": "ISC", 
    "bugs": { 
    "url": "https://github.com/dustinchang/React_Learning_LearnCode.Academy/issues" 
    }, 
    "homepage": "https://github.com/dustinchang/React_Learning_LearnCode.Academy#readme", 
    "dependencies": { 
    "babel-core": "^6.9.1", 
    "babel-loader": "^6.2.0", 
    "babel-plugin-add-module-exports": "^0.1.2", 
    "babel-plugin-react-html-attrs": "^2.0.0", 
    "babel-plugin-transform-class-properties": "^6.3.13", 
    "babel-plugin-transform-decorators-legacy": "^1.3.4", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "babel-preset-stage-0": "^6.3.13", 
    "react": "^0.14.6", 
    "react-dom": "^0.14.6", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

Iどんなアドバイスも大変ありがとうございます。

+0

sourcemap - > slow、babel - > slow、UglifyJsPlugin - > slow。 webpack --json --progress --profile> stats.jsonを実行して、分析ツールにロードして詳細を確認してください。 –

+0

チュートリアルはプロジェクトよりも速いと言います。チュートリアルプロジェクトよりもはるかに多くのファイルがあり、より多くの依存関係もあれば、その違いを説明することができます。 –

+0

依存関係の唯一の違いは、babel-loaderの代わりにbabelを使用しようとどこかで読んだようなbabel-coreを追加したことです。これはパフォーマンスはいくらか向上しましたが、まだ遅いですし、webpack-dev-チュートリアルで。 – dlchang

答えて

0

Windowsでは、キャッシュディレクトリの[babel]オプション(https://github.com/babel/babel-loader#options)を有効にすることができます。それは私がリロードするときに多くの時間を節約する。

+0

私はbabel-loader?cacheDirectoryを使用するとエラーになるので、MacOSでは動作しません。 – dlchang