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功能

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM