私は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どんなアドバイスも大変ありがとうございます。
sourcemap - > slow、babel - > slow、UglifyJsPlugin - > slow。 webpack --json --progress --profile> stats.jsonを実行して、分析ツールにロードして詳細を確認してください。 –
チュートリアルはプロジェクトよりも速いと言います。チュートリアルプロジェクトよりもはるかに多くのファイルがあり、より多くの依存関係もあれば、その違いを説明することができます。 –
依存関係の唯一の違いは、babel-loaderの代わりにbabelを使用しようとどこかで読んだようなbabel-coreを追加したことです。これはパフォーマンスはいくらか向上しましたが、まだ遅いですし、webpack-dev-チュートリアルで。 – dlchang