Angular2 + Webpack: как оптимизировать пакет поставщиков

Question

У меня есть клиентская сторона приложения MEAN в веб-пакете anular2.

Когда я обслуживаю index.html с сервера для первоначального запроса, оно занимает время загрузки 5 или 6 даже больше секунд, когда приложение в производстве, из-за модулей JS-модулей поставщика больше 3 МБ.

Как я могу оптимизировать эту вещь Я хочу отделить 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'; 

Проект здания можно получить bundle.js и bundle.map.js содержит мои JS приложения vendor.bundle.js и vendor.bundle.map.js будет содержать стороннюю JS

Я хочу, чтобы скомпилировать эту vendor.js каждую библиотеку отдельно, а также все СКС должны быть собраны в отдельном style.css в ditribution.

Спасибо всем.

Answer 1

я могу видеть, что некоторые области, чтобы улучшить:

1. Я не могу видеть минификация плагин в вашем коде, так это даст вам огромный толчок. См UglifyJsPlugin

2. Вы добавили непосредственно все угловые модули (даже если они не могут быть необходимы):

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

   Это лучше просто импортировать конкретные вещи, когда это необходимо, как:

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

3. Имея импорт как и выше, вы сможете получить преимущества предстоящего Webpack 2. Наиболее важной частью является:

статический характер модулей ES6 позволяет какой-то новый вид оптимизации. В ряде случаев во многих случаях можно определить, какие из них используются и которые не используются.

В тех случаях, когда веб-пакет может точно сказать, что экспорт не используется, он опускает оператор, который предоставляет экспорт другим модулям. Позже минимизатор может объявить декларацию неиспользованной и опустить ее.

Я думаю, что все это вместе может сделать ваше производственное приложение более тонким, не разделяя библиотеки.