我一直在嘗試從ReactJS Tutorials來學習React和Webpack。 我的問題是當我從我的所有文件的頂級目錄中運行webpack時,通常需要大約62392ms。但是,在教程中,他需要1394ms。我讀過排除的應該有助於提高性能的時間,但我已經排除了node_modules。我試着開關我裝載機只是巴貝爾並把它帶到我的WebPack時間縮短到13183ms,但似乎仍然非常緩慢,特別是當它只是transpiling一個文件(client.js)。有沒有人知道爲什麼運行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"
}
}
我非常感謝任何建議。
sourcemap - > slow,babel - > slow,UglifyJsPlugin - > slow。嘗試運行webpack --json --progress --profile> stats.json並將其加載到分析工具中以查看更多詳細信息 –
您說該教程比您的項目更快:它們之間的區別是什麼?如果您的文件遠遠多於教程項目以及更多的依賴關係,它可以解釋這種差異。 –
唯一的依賴差異是我添加了babel-core,因爲我在某處讀取嘗試使用babel而不是babel-loader,這雖然在一定程度上提高了性能,但仍然很慢,然後webpack-dev-server只是稍微進一步在教程中。 – dlchang