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