저는 React와 Webpack을 ReactJS Tutorials에서 배우려고 노력하고 있습니다. 내 문제는 모든 파일의 최상위 디렉토리에서 webpack을 실행할 때 보통 약 62392ms입니다. 그러나 튜토리얼에서 그는 1394ms 걸립니다. 나는 을 제외하고는가 성능 시간을 늘리는데 도움이된다고 읽었지만, 이미 노드 모듈을 제외 시켰습니다. 난 그냥 바벨에 내 로더 전환 시도하고 그것은 13183ms 아래로 내 웹팩 시간을 가져하지만 그것은 단지 하나 개의 파일 (client.js)를 transpiling있어 특히 때 여전히 지독하게 느린 것 같다. 거기에 다른 사람 stackoverflow 답변의 대부분을 포함/경로/디렉토리 제외하고 내가 이미 해본 것처럼 webpack 명령을 실행하는 것은 너무 느린 것을 아는 사람이 있습니까?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 어떤 조언을 크게 감사드립니다.
소스 맵 -> 느리게, 바벨 -> 천천히, UglifyJsPlugin -> 천천히. webpack --json --progress --profile> stats.json을 실행하고 분석 도구에로드하여 자세한 내용을 확인하십시오. –
자습서가 프로젝트보다 빠르다고 말하면 무엇입니까? 튜토리얼 프로젝트와 많은 의존성보다 훨씬 많은 파일을 가지고 있다면 차이점을 설명 할 수 있습니다. –
유일한 의존성 차이점은 babel-loader 대신 약간의 babel을 사용하려고 시도했는데 성능은 약간 향상되었지만 여전히 느리고 webpack-dev-server는 조금 더 가깝습니다. 튜토리얼에서. – dlchang