ionic 2.x 3.x 打包 压缩

大家都知道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功能