我一直在尝试从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