2016-05-31 1 views
0

저는 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 어떤 조언을 크게 감사드립니다.

+0

소스 맵 -> 느리게, 바벨 -> 천천히, UglifyJsPlugin -> 천천히. webpack --json --progress --profile> stats.json을 실행하고 분석 도구에로드하여 자세한 내용을 확인하십시오. –

+0

자습서가 프로젝트보다 빠르다고 말하면 무엇입니까? 튜토리얼 프로젝트와 많은 의존성보다 훨씬 많은 파일을 가지고 있다면 차이점을 설명 할 수 있습니다. –

+0

유일한 의존성 차이점은 babel-loader 대신 약간의 babel을 사용하려고 시도했는데 성능은 약간 향상되었지만 여전히 느리고 webpack-dev-server는 조금 더 가깝습니다. 튜토리얼에서. – dlchang

답변

0

Windows의 경우 캐시 디렉토리 바벨 옵션] (https://github.com/babel/babel-loader#options)을 활성화 할 수 있습니다. 다시로드 할 때 많은 시간을 절약 할 수 있습니다.

+0

바벨 로더? cacheDirectory를 사용하면 오류가 발생하므로 MacOS에서는 작동하지 않습니다. – dlchang

관련 문제