webpack을 사용하여 각도 2 응용 프로그램 빌드 기간 최적화

Question

나는 Angular 2 응용 프로그램을 빌드하고 webpack과 함께 제공합니다. 현재 애플리케이션은 작지만 웹팩 작업에는 약 10 초가 소요됩니다. 컴파일 및 패키징 기간을 향상시키기 위해 webpack config 또는 TypeSript 컴파일 옵션을 최적화 할 수 있습니까?

var webpack = require('webpack'); 
var LiveReloadPlugin = require('webpack-livereload-plugin'); 

module.exports = { 
    entry: __dirname + '/assets/app/app.ts', 
    output: { 
    filename: 'myApp.bundle.js', 
    path: __dirname + '/build/' 
    }, 
    // Turn on sourcemaps 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['.ts', '.js'] 
    }, 
    plugins: [ 
    new LiveReloadPlugin({ 
     appendScriptTag: true 
    }), 
    // Fixes angular 2 warning 
    new webpack.ContextReplacementPlugin(
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     __dirname 
    ) 
    ], 
    module: { 
    rules: [{ 
     enforce: 'pre', 
     test: /\.js$/, 
     loader: "source-map-loader" 
     }, 
     { 
     enforce: 'pre', 
     test: /\.tsx?$/, 
     use: "ts-loader" 
     } 
    ] 
    } 
} 

그리고 tsconfig :

{ 
    "compilerOptions": { 
    "target": "ES5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "pretty": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "noUnusedLocals": false, 
    "removeComments": true, 
    "skipLibCheck": true, 
    "strictNullChecks": false, 
    "baseUrl": "./src", 
    "typeRoots": ["node_modules/@types"], 
    "types": [ 
     "core-js", 
     "systemjs" 
    ], 
    "outDir": "./build" 
    }, 
    "exclude": [ 
    "node_modules" 
    ] 
} 

가 UPDATE가 (고정 webpack.config에 대한 내 대답을 참조)

이

은 웹팩 내가 사용하는 설정입니다 별도의 buil에서 각도를 컴파일하여 @jpwiddy에서 제안한 DLL webpack 플러그인을 시도해 보겠습니다. d를 사용하여 개발 중에 응용 프로그램 코드 만 다시 작성하고 편집 작업에 상당한 시간을 할애해야합니다.

그러나 출력 JS를 검사 한 후에 파일 크기는 상당히 동일하며 내부에 각도 코드가 있습니다. 여기

var webpack = require('webpack'); 
var LiveReloadPlugin = require('webpack-livereload-plugin'); 

module.exports = { 
    entry: __dirname + '/assets/app/app.ts', 
    output: { 
    filename: 'myApp.bundle.js', 
    path: __dirname + '/build/' 
    }, 
    // Turn on sourcemaps 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['.ts', '.js'] 
    }, 
    plugins: [ 
    new LiveReloadPlugin({ 
     appendScriptTag: true 
    }), 
    // Fixes angular 2 warning 
    new webpack.ContextReplacementPlugin(
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     __dirname 
    ), 
    new webpack.DllReferencePlugin({ 
     context: __dirname + '/build/', 
     manifest: require(__dirname + '/build/ng2.json') 
    }) 
    ], 
    module: { 
    rules: [{ 
     enforce: 'pre', 
     test: /\.js$/, 
     loader: "source-map-loader" 
     }, 
     { 
     enforce: 'pre', 
     test: /\.tsx?$/, 
     use: "ts-loader" 
     } 
    ] 
    } 
} 

내가 내 응용 프로그램 JS에서 발견 된 각 코드 중 하나입니다

var webpack = require('webpack'); 

module.exports = { 
    entry: { 
     angular:[ 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 
     '@angular/core', 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/http', 
     '@angular/router', 
     '@angular/forms'   
    ] 
    }, 
    output: { 
    filename: 'ng2.dll.js', 
    path: __dirname + '/build/', 
    library: 'ng2' 
    }, 
    plugins: [ 
    // Fixes angular 2 warning 
    new webpack.ContextReplacementPlugin(
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     __dirname 
    ), 
    new webpack.DllPlugin({ 
     name: 'ng2', 
     path: __dirname + '/build/ng2.json' 
    }) 
    ] 
} 

그리고 응용 프로그램에 대한 업데이트 웹팩 설정 : 여기

는 각 소스에 대한 새로운 웹팩 설정 파일입니다 출력 :

_TsEmitterVisitor.prototype.visitBuiltintType = function (type, ctx) { 
    var typeStr; 
    switch (type.name) { 
     case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Bool: 
      typeStr = 'boolean'; 
      break; 
     case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Dynamic: 
      typeStr = 'any'; 
      break; 
     case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Function: 
      typeStr = 'Function'; 
      break; 
     case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Number: 
      typeStr = 'number'; 
      break; 
     case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Int: 
      typeStr = 'number'; 
      break; 
     case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].String: 
      typeStr = 'string'; 
      break; 
     default: 
      throw new Error("Unsupported builtin type " + type.name); 
    } 
    ctx.print(typeStr); 
    return null; 
}; 

w가 표시되지 않도록 새 설정에서 놓친 것이 있었습니까? 출력에 각도 소스를 포함하는 ebpack?

당신에게 웹팩 과정은 빌드에서 DLL을 구현하고 구축을 가속화하고있다 개인적으로했던

Answer 1

나는 새로운 모듈 webpack-dll-bundles-plugin 내 설정을 해결하기 위해 관리 내가 찾던 정확히 일 (DllPlugin 및 DllReferencePlugin를 사용하여 배경)의 빌드를 분리 자신의 번들에 2를 넣고 응용 프로그램 코드를 다시 작성할 때마다 번들 전체를 다시 빌드하지 마십시오 (예 : 감시자와 함께).

내 재 빌드 시간이 10 초에서 1 초로 떨어졌습니다.

이

var webpack = require('webpack'); 
var LiveReloadPlugin = require('webpack-livereload-plugin'); 
const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin; 

module.exports = { 
    entry: __dirname + '/assets/app/app.ts', 
    output: { 
    filename: 'myApp.bundle.js', 
    path: __dirname + '/build/' 
    }, 
    // Turn on sourcemaps 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['.ts', '.js'] 
    }, 
    plugins: [ 
    new LiveReloadPlugin({ 
     appendScriptTag: true 
    }), 
    // Fixes angular 2 warning 
    new webpack.ContextReplacementPlugin(
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     __dirname 
    ), 
    new DllBundlesPlugin({ 
     bundles: { 
      vendor: [ 
      '@angular/platform-browser', 
      '@angular/platform-browser-dynamic', 
      '@angular/core', 
      '@angular/common', 
      '@angular/forms', 
      '@angular/http', 
      '@angular/router', 
      'rxjs', 
      ] 
     }, 
     dllDir: __dirname + '/build/', 
     webpackConfig: {} 
     }) 
    ], 
    module: { 
    rules: [{ 
     enforce: 'pre', 
     test: /\.js$/, 
     loader: "source-map-loader" 
     }, 
     { 
     enforce: 'pre', 
     test: /\.tsx?$/, 
     use: "ts-loader" 
     } 
    ] 
    } 
} 

Answer 2

하나의 좋은 방법 감사합니다.

Webpack은 require 및 import에 대한 코드를 분석 한 다음 모든 모듈 종속성에 대한 이러한 명령문과 해당 파일을 찾을 수있는 링크에 대한 테이블을 작성합니다.

종속성을 DLL에 등록 할 때 DLL 종속성이 변경 될 때마다 (매우 드물게) DLL을 빌드 할 때 (DLL 번들과 JSON 매니페스트 파일로 구성)와 같이 DLL 플러그인이 향상됩니다. 이러한 모든 종속성을 단일 패키지로 묶습니다. 그 패키지는 앱에 의존성을 가져올 때 참조됩니다.

빠른 예 :

entry: { 
    angular:[ 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 
     '@angular/core', 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/http', 
     '@angular/router', 
     '@angular/forms'   
    ], 
    bs: [ 
     'bootstrap', 
     'ng-bootstrap' 
    ] 
}, 

output: { 
    filename: '[name].dll.js', 
    path: outputPath, 
    library: '[name]', 
}, 

plugins: [ 
    new webpack.DllPlugin({ 
     name: '[name]', 
     path: join(outputPath, '[name].json') 
    }) 
] 

...다음 그래서 참조 -

{ 
    plugins: [ 
     new webpack.DllReferencePlugin({ 
      context: process.cwd(), 
      manifest: require(join(outputPath, 'angular.json')) 
     }), 
     new webpack.DllReferencePlugin({ 
      context: process.cwd(), 
      manifest: require(join(outputPath, 'bs.json')) 
     }), 
    ] 
}