Angular2 + Webpack : 공급 업체 번들을 최적화하는 방법

Question

MEAN 응용 프로그램 클라이언트 측이 anular2 빌드 웹 팩에 있습니다.

초기 요청으로 서버에서 index.html을 제공하는 경우 공급 업체 모듈 JS 파일이 3MB 이상이므로 프로덕션 환경에서 응용 프로그램을로드하는 데 5 또는 6 초 이상 걸립니다.

어떻게하면 최적화 할 수 있습니까? 공급 업체의 JS 파일을 분리하고 싶습니다. 다음은 내가 내 응용 프로그램의 JS를 포함 bundle.js 및 bundle.map.js를 얻을 수 있습니다 내 webpack.config.js

const webpack = require('webpack'); 
const production = process.env.NODE_ENV === "production"; 
const autoprefixer = require('autoprefixer'); 
const path = require("path"); 

const config = { 

    entry: { 
    'app': './client/app.ts', 
    'vendor': './client/vendor.ts' }, 

    debug: !production, 

    devtool: production ? null : "source-map", 

    output: { 
    path: "./dist", 
    filename: "bundle.js" }, 

    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js') ], 

    resolve: { 
    extensions: ['', '.ts'] }, 

    module: { 
    loaders: [ 
     { test: /\.ts$/, loader: 'ts-loader' }, 
     { test: /\.html$/, loader: 'raw'}, 
     { test: /\.scss$/, include: [ path.resolve(__dirname, 'client/app/components') ], loader: 'style!css!postcss!sass' } 
    ], 
    noParse: [ path.join(__dirname, 'node_modules', 'angular2', 'bundles') ] }, postcss: [ autoprefixer ] }; 

module.exports = config; 

내 vendor.ts 파일 다음

import 'core-js/es6'; 
import 'core-js/es7/reflect'; 
require('zone.js/dist/zone'); 

import 'ts-helpers'; 

import '@angular/platform-browser-dynamic'; 
import '@angular/core'; 
import '@angular/common'; 
import '@angular/http'; 
import '@angular/router'; 

import 'socket.io-client'; 

// RxJS 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/mergeMap'; 

import './assets/vendor/bootstrap'; 
import './assets/vendor/fontawesome.scss'; 

건물 프로젝트 vendor.bundle.js 및 vendor.bundle.map.js이 포함됩니다 타사 JS

나는 모든 SCS들이 ditribution 별도의있는 style.css에서 컴파일해야 별도로뿐만 아니라이 vendor.js 각 라이브러리를 컴파일합니다.

감사합니다.

Answer 1

나는 일부 지역을 개선하기 위해 볼 수 있습니다 : 그것은 당신 에게 큰 도움을 줄 것이다, 그래서 난 당신의 코드에서 어떤 축약 플러그인을 볼 수 없습니다

1. .

   import {Component} from '@angular/core'; 
   

2. 갖는 수입 :처럼 필요할 때

   import '@angular/platform-browser-dynamic'; 
   import '@angular/core'; 
   import '@angular/common'; 
   import '@angular/http'; 
   import '@angular/router'; 
   

   그것은 특정 일을 단지를 수입하는 것이 좋습니다 : UglifyJsPlugin

3. 당신은 (심지어는 필요하지 않음) 직접 모든 각도 모듈을 추가 참조 위와 같이 나눠서 Webpack 2의 혜택을 누릴 수 있습니다. 가장 중요한 부분은 다음과 같습니다

   는

ES6 모듈의 정적 특성은 최적화의 새로운 종류의 수 있습니다. 예를 들어 많은 경우에 어떤 수출이 사용되고 어떤 것이 사용되지 않는지를 탐지 할 수 있습니다.

webpack이 내보내기가 사용되지 않는다고 말할 수있는 경우 다른 모듈로 내보내기를 제공하는 명령문을 생략합니다. 나중에 최소화 기는 선언문을 사용하지 않는 것으로 플래그를 지정하고 생략합니다.

나는이 모든 것이 함께 라이브러리를 분할하지 않고 훨씬 더 얇게 만들 수 있다고 생각합니다.