Question

我是angular2和webpack的新手。我已经关注this存储库以使angular2应用程序生产准备就绪。除了common.js的文件大小太大（几乎7mb）之外，一切正常。它需要花费大量时间才能加载。

Here是我的申请。

webpack.prod.config.js中的配置：

entry: {
    'vendor': './src/vendor.ts', // third party dependencies
    'app': './src/app/app.ts' // our app
},

output: {
    path: root('__build__'),
    filename: '[name].js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js',
    pathinfo: true
},
......
plugins: [
        new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.js', minChunks: Infinity}),
        new CommonsChunkPlugin({name: 'common', filename: 'common.js', minChunks: Infinity, chunks: ['app', 'vendor']}),
        new ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            Cookies: "js-cookie",
            gsap: 'gsap'
        }),
        // new UglifyJsPlugin() // use for production
    ],

我的vendor.ts文件

require('./lib/bootstrap/less/bootstrap.less');
require('./css/datepicker.css');
require('./css/main.css');

import 'angular2/bundles/angular2-polyfills';

import 'angular2/platform/browser';
import 'angular2/core';
import 'angular2/http';
import 'angular2/router';
import 'moment';
import 'gsap';

// FOR WHATEVER REASON, THIS MUST COME AFTER THE ANGULAR2-POLYFILLS IMPORT
require('imports?jQuery=jquery!./lib/bootstrap/bootstrap.min.js');
require('imports?jQuery=jquery!./lib/bootstrap/bootstrap-datepicker.js');

我的app.ts文件

import {Component, provide} from 'angular2/core';
import {ROUTER_DIRECTIVES, RouteConfig, ROUTER_PROVIDERS, RouterOutlet, PathLocationStrategy, HashLocationStrategy, LocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {bootstrap} from 'angular2/platform/browser';
import {COMMON_DIRECTIVES} from 'angular2/common';
import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';

import {Register} from './components/register/register';
import {Login} from './components/login/login';
import {Forgot} from './components/forgot/forgot';
// import {Dashboard} from './components/dashboard/dashboard';

import {NewAppt} from './components/appt/new';
import {NewWait} from './components/wait/new';
import {ApptHistory} from './components/appt/history';
// import {WaitHistory} from './components/wait/history';
import {EditProfile} from './components/profile/edit';
import {Loggedout} from './components/loggedout/loggedout';

import {AppService} from './services/app.service';
import {AuthService} from './services/auth.service';
import {WindowService} from './services/window.service';
import {CookieService} from './services/cookie.service';
import {NavBar} from './components/navbar/navbar';

webpack-analyzer结果：

angular2: 4.64 MB (72.1%)
  <self>: 4.64 MB (100%)
moment: 411.37 kB (6.24%)
  <self>: 411.37 kB (100%)
gsap: 337.36 kB (5.12%)
  <self>: 337.36 kB (100%)
jquery: 241.79 kB (3.67%)
  <self>: 241.79 kB (100%)
rxjs: 32.53 kB (0.493%)
  <self>: 32.53 kB (100%)
style-loader: 7.04 kB (0.107%)
  <self>: 7.04 kB (100%)
js-cookie: 3.34 kB (0.0507%)
  <self>: 3.34 kB (100%)
css-loader: 1.47 kB (0.0223%)
  <self>: 1.47 kB (100%)
webpack: 294 B (0.00435%)
  <self>: 294 B (100%)
<self>: 805.63 kB (12.2%)

如果有人可以帮助我，那将会非常有帮助。

如何使用webpack准备spa（angular2）生产？

0 个答案: