這篇文章主要介紹如何打包優(yōu)化Angular6項目，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司公司2013年成立，先為臨高等服務(wù)建站，臨高等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為臨高企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

可以從以下三個角度優(yōu)化：

• 輸出包體組成分析文件

• Rollup 搖樹優(yōu)化

• 導(dǎo)出Webpack配置，通過修改webpack配置優(yōu)化打包

讓我們來逐一分析。

輸出包體組成分析文件

Webpack 有一個非常好用的工具叫 webpack-bundle-analyzer，會自動分析包體組成結(jié)構(gòu)，并以一種可視化的方式顯示。

使用步驟:

1. 打開項目，命令行輸入：npm install webpack-bundle-analyzer --save-dev

2. 命令行輸入項目打包命令加--stats-json

3. 在package.json文件的"scripts"里配置里，添加"bundle-report": "webpack-bundle-analyzer dist/wp/stats.json"

4. 命令行輸入：npm run bundle-report

5. 瀏覽器輸入：http://127.0.0.1:8888/ 查看分析圖，根據(jù)分析圖了解一些優(yōu)化的細節(jié)

備注：在不影響性能的情況下，盡量少用Base64引入圖片，把圖片放在本地引入，不會打包到項目中去，但使用Base64編碼的圖片，會以圖片的1.5倍體積打包到項目中去，且若該圖片為精靈圖，使用圖片時采取了div切圖，切了幾次，就會打包幾次，占用體積非常大。具體可以參考以下：https://www.imooc.com/article/27804

Rollup 搖樹優(yōu)化

所謂Rollup是指Webpack2會把那些應(yīng)用中未使用的引用代碼除掉，但不會刪除這些代碼，所以就需要配合 UglifyJs 能夠智能的

移除這些未使用的代碼。從而減少包體大小。

而Agnular應(yīng)用是基于Typescript，因此Angular Cli提供了一個叫 Angular Build Optimizer 插件，將 Typescript 編譯結(jié)果轉(zhuǎn)化成更友好的UglifyJs版本。這樣UglifyJs就能夠更有效的移除那些未使用的代碼

方法一：Angular Cli只需要在打包命令中加上 --build-optimizer 參數(shù)就可以，在一些情況下壓縮的還是很厲害的（但我做優(yōu)化的過程中，使用了這樣的方法，毫無作用）

方法二：去掉沒有用到的模塊，從而減小體積

1、moment

對于 ng-cli 的項目:

（1）運行npm uninstall moment

（2）運行npm install moment --save-dev

（3）.angular-cli.json 文件的 scripts

里加上"../node_modules/moment/min/moment.min.js"

（4）typings.d.ts 文件的最后加上 declare var moment: any;

（5）將項目中的代碼 import * as moment from 'moment';全部干掉

備注：如果想應(yīng)用其中某個庫則需要（以 fr 為例）

引入：import "moment/locale/fr";

使用：moment.locale("fr");

對于 webpack 的項目：

（1）在 webpack 配置文件的 plugins 里加上

new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, / /)

或者

new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

備注：如果想應(yīng)用其中某個庫則需要（以 de、fr、hu 為例），在 webpack 配置文件的 plugins 里加上
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)

2、@ng-bootstrap/ng-bootstrap

如果在項目中要用到 @ng-bootstrap/ng-bootstrap 庫，要注意一下使用方法，如果按照其官網(wǎng)示例方式引入的話，在打包的時候會把其下所有模塊引入進來，不管你用沒用到。所以要想辦法把沒有用到的模塊干掉，只引入需要的模塊。

以時間組件為例，官網(wǎng)示例：

// 根模塊
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
 declarations: [AppComponent, ...],
 imports: [NgbModule.forRoot(), ...], 
 bootstrap: [AppComponent]
})
export class AppModule {
}

// 其他需要模塊
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
 declarations: [OtherComponent, ...],
 imports: [NgbModule, ...],
})
export class OtherModule {
}

更改為：

// 根模塊
import {NgbDatepickerModule, NgbTimepickerModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
 declarations: [AppComponent, ...],
 imports: [NgbDatepickerModule.forRoot(), NgbTimepickerModule.forRoot() ...], 
 bootstrap: [AppComponent]
})
export class AppModule {
}

// 其他需要模塊
import {NgbDatepickerModule, NgbTimepickerModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
 declarations: [OtherComponent, ...],
 imports: [NgbDatepickerModule, NgbTimepickerModule, ...],
})
export class OtherModule {
}

導(dǎo)出Webpack配置

方法一：eject（Angular6可能不支持）

方法二：工具庫ngx-build-plus

我期望通過導(dǎo)出Webpack配置的方式，使scss文件與main.js打包分離，仍在實踐中，成功后續(xù)更。

以上是“如何打包優(yōu)化Angular6項目”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：如何打包優(yōu)化Angular6項目-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://chinadenli.net/article42/cdjgec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、云服務(wù)器、動態(tài)網(wǎng)站、網(wǎng)站策劃、定制開發(fā)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)