大家都知道Ionic项目ionic serve生成的js css 非常庞大，小有1m多，大有几m，文件如此大load页面的时候需要较长时间的加载，特别在生产环境中，灰常不利于用户体验。

因此我们需要进行打包。打包后文件会大大变小。方法如下。

 

方法一：

npm run ionic:build --prod

*、命令虽然简单，但在使用过程中自己碰到很多问题，打包出错。如：

Component is part of the declaration of 2 modules

Ionic build –prod error: Type … in … is part of the declarations of 2 modules:

最终解决方法如下：

1、为所有page建xx.module.ts

2、页面所用到的pipe/components单独在page的module中引入

3、建一个公共module如pages.module.ts，并import所有页面的module

3、在app.module.ts引入pages.module.ts，但不再需要在app.module.ts的declarations中声明page

截图：

代码示例：

home.module.ts 

因HomePage页使用了pipe管道（过滤器）、components（组件），所以此module引入了PipeModule/ComponentsModule

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { PipesModule } from '../../pipes/pipes.module';
import { ComponentsModule } from '../../components/components.module';@NgModule({declarations: [HomePage,],imports: [PipesModule,ComponentsModule,IonicPageModule.forChild(HomePage),],
})
export class HomePageModule { }

components.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { CounterInputComponent } from './counter-input/counter-input';
import { SocialShareComponent } from './social-share/social-share';
import { CountDownComponent } from './count-down/count-down';
@NgModule({declarations: [CounterInputComponent, SocialShareComponent,CountDownComponent],imports: [IonicModule],exports: [CounterInputComponent, SocialShareComponent,CountDownComponent]
})
export class ComponentsModule { }

pipes.module.ts

import { NgModule } from '@angular/core';
import { ToLocaleWeekPipe } from './to-locale-week/to-locale-week';
import { CurrencySymbolPipe } from './currency-symbol/currency-symbol';
import { TrafficToolsPipe } from './traffic-tools/traffic-tools';
@NgModule({declarations: [ToLocaleWeekPipe,CurrencySymbolPipe,TrafficToolsPipe],imports: [],exports: [ToLocaleWeekPipe,CurrencySymbolPipe,TrafficToolsPipe]
})
export class PipesModule {}

pages.module.ts

import { NgModule } from '@angular/core';import { HomePageModule } from '../pages/home/home.module';
import { SearchIndexPageModule } from '../pages/search-index/search-index.module';
import { TicketIndexPageModule } from '../pages/ticket-index/ticket-index.module';
import { HotelIndexPageModule } from '../pages/hotel-index/hotel-index.module';
import { SupplierStorePageModule } from '../pages/supplier-store/supplier-store.module';
import { LineDetailPageModule } from '../pages/line-detail/line-detail.module';
import { TicketDetailPageModule } from '../pages/ticket-detail/ticket-detail.module';
import { OrderPageModule } from '../pages/order/order.module';
import { InvoicePageModule } from "../pages/invoice/invoice.module";
import { OrderCompletePageModule } from "../pages/order-complete/order-complete.module";
import { VisitorPageModule } from "../pages/visitor/visitor.module";
import { ShippingPageModule } from "../pages/shipping/shipping.module";
import { VisitorEditPageModule } from "../pages/visitor-edit/visitor-edit.module";
import { VisitorOrderPageModule } from "../pages/visitor-order/visitor-order.module";
import { SupplierInfoPageModule } from "../pages/supplier-info/supplier-info.module";
import { UesChatPageModule } from '../pages/ues-chat/ues-chat.module';
import { SupplierPageModule } from '../pages/supplier/supplier.module';
import { HotelDetailPageModule } from "../pages/hotel-detail/hotel-detail.module";
import { LineSearchResultPageModule } from '../pages/line-search-result/line-search-result.module';
import { HotelSearchResultPageModule } from '../pages/hotel-search-result/hotel-search-result.module';
import { TicketSearchResultPageModule } from '../pages/ticket-search-result/ticket-search-result.module';
import { ArriveAtCityPageModule } from '../pages/arrive-at-city/arrive-at-city.module';
import { SetOutCityPageModule } from '../pages/set-out-city/set-out-city.module';
import { SingleIndexPageModule } from '../pages/single-index/single-index.module';
import { SingleDetailPageModule } from '../pages/single-detail/single-detail.module';
import { LineIndexPageModule } from '../pages/line-index/line-index.module';
import { SingleSearchResultPageModule } from '../pages/single-search-result/single-search-result.module';
import { QqChatPageModule } from '../pages/qq-chat/qq-chat.module';
import { ShippingEditPageModule } from '../pages/shipping-edit/shipping-edit.module';
import { InvoiceEditPageModule } from '../pages/invoice-edit/invoice-edit.module';@NgModule({imports: [HomePageModule,SearchIndexPageModule,TicketIndexPageModule,HotelIndexPageModule,SupplierStorePageModule,LineDetailPageModule,TicketDetailPageModule,OrderPageModule,InvoicePageModule,OrderCompletePageModule,VisitorPageModule,ShippingPageModule,VisitorEditPageModule,VisitorOrderPageModule,SupplierInfoPageModule,UesChatPageModule,SupplierPageModule,HotelDetailPageModule,LineSearchResultPageModule,HotelSearchResultPageModule,TicketSearchResultPageModule,ArriveAtCityPageModule,SetOutCityPageModule,SingleIndexPageModule,SingleDetailPageModule,LineIndexPageModule,SingleSearchResultPageModule,QqChatPageModule,ShippingEditPageModule,InvoiceEditPageModule],declarations: [],providers: [],exports: []
})
export class PagesModule { }

app.module.ts

由于pipe、components已经在每个页面的module中各自声明了，所以app.module.ts这里也不再需要声明pipe、components，不然才要报存在两个声明的错误了。

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HttpModule, JsonpModule } from '@angular/http';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';import { HttpService } from '../providers/httpService';
import { CalendarModule } from 'ion2-calendar';import { MyApp } from './app.component';
import { TabsPage } from '../pages/tabs/tabs';import { HomePage } from '../pages/home/home';
import { SearchIndexPage } from '../pages/search-index/search-index';
import { TicketIndexPage } from '../pages/ticket-index/ticket-index';
import { HotelIndexPage } from '../pages/hotel-index/hotel-index';
import { SupplierStorePage } from '../pages/supplier-store/supplier-store';
import { LineDetailPage } from '../pages/line-detail/line-detail';
import { TicketDetailPage } from '../pages/ticket-detail/ticket-detail';
import { OrderPage } from '../pages/order/order';
import { InvoicePage } from "../pages/invoice/invoice";
import { OrderCompletePage } from "../pages/order-complete/order-complete";
import { VisitorPage } from "../pages/visitor/visitor";
import { ShippingPage } from "../pages/shipping/shipping";
import { VisitorEditPage } from "../pages/visitor-edit/visitor-edit";
import { VisitorOrderPage } from "../pages/visitor-order/visitor-order";
import { SupplierInfoPage } from "../pages/supplier-info/supplier-info";
import { UesChatPage } from '../pages/ues-chat/ues-chat';
import { SupplierPage } from '../pages/supplier/supplier';
import { HotelDetailPage } from "../pages/hotel-detail/hotel-detail";
import { LineSearchResultPage } from '../pages/line-search-result/line-search-result';
import { HotelSearchResultPage } from '../pages/hotel-search-result/hotel-search-result';
import { TicketSearchResultPage } from '../pages/ticket-search-result/ticket-search-result';
import { ArriveAtCityPage } from '../pages/arrive-at-city/arrive-at-city';
import { SetOutCityPage } from '../pages/set-out-city/set-out-city';
import { SingleIndexPage } from '../pages/single-index/single-index';
import { SingleDetailPage } from '../pages/single-detail/single-detail';
import { LineIndexPage } from '../pages/line-index/line-index';
import { SingleSearchResultPage } from '../pages/single-search-result/single-search-result';
import { QqChatPage } from '../pages/qq-chat/qq-chat';
import { ShippingEditPage } from '../pages/shipping-edit/shipping-edit';
import { InvoiceEditPage } from '../pages/invoice-edit/invoice-edit';import { PagesModule } from '../pages/pages.module';@NgModule({declarations: [MyApp,TabsPage,],imports: [HttpModule,BrowserModule,CalendarModule,JsonpModule,PagesModule,IonicModule.forRoot(MyApp, {backButtonText: ''})],bootstrap: [IonicApp],entryComponents: [MyApp,HomePage,TabsPage,SearchIndexPage,TicketIndexPage,HotelIndexPage,SupplierStorePage,LineDetailPage,TicketDetailPage,OrderPage,InvoicePage,OrderCompletePage,VisitorPage,ShippingPage,VisitorOrderPage,VisitorEditPage,SupplierInfoPage,UesChatPage,SupplierPage,HotelDetailPage,LineSearchResultPage,HotelSearchResultPage,TicketSearchResultPage,ArriveAtCityPage,SetOutCityPage,SingleIndexPage,SingleDetailPage,LineIndexPage,SingleSearchResultPage,QqChatPage,ShippingEditPage,InvoiceEditPage],providers: [StatusBar,SplashScreen,HttpService,{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule { }

好了。到这里已经build成功了。说实话还是挺麻烦的，之前贪方便都是全局声明，到了build才报这么多错误，反复尝试才build成功。另外，也不知道这是不是比较好的解决方案，在这里只是做下笔记，以便往后查阅。

 

方法二、使用UglifyJS2压缩js文件，亲自实践，1m多的文件可以压缩到400kb左右。也比较方便。

npm install uglify-js -g

uglifyjs main.js -o main.min.js

 

方法三、使用gzip进一步压缩

方法四、增加过滤器进行请求转发

方法五、其它优化功能 如AOT功能