Angular6項目打包優(yōu)化的實現(xiàn)方法
可以從以下三個角度優(yōu)化:
- 輸出包體組成分析文件
- Rollup 搖樹優(yōu)化
- 導(dǎo)出Webpack配置,通過修改webpack配置優(yōu)化打包
讓我們來逐一分析。
輸出包體組成分析文件
Webpack 有一個非常好用的工具叫 webpack-bundle-analyzer,會自動分析包體組成結(jié)構(gòu),并以一種可視化的方式顯示。
使用步驟:
- 打開項目,命令行輸入:
npm install webpack-bundle-analyzer --save-dev
- 命令行輸入項目打包命令加--stats-json
- 在package.json文件的"scripts"里配置里,添加
"bundle-report": "webpack-bundle-analyzer dist/wp/stats.json"
- 命令行輸入:
npm run bundle-report
- 瀏覽器輸入: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ù)更。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,謝謝大家對腳本之家的支持。
相關(guān)文章
使用AngularJS 應(yīng)用訪問 Android 手機的圖片庫
這篇文章主要介紹了使用AngularJS 應(yīng)用訪問 Android 手機的圖片庫的相關(guān)資料,需要的朋友可以參考下2015-03-03angularJs中orderBy篩選以及filter過濾數(shù)據(jù)的方法
今天小編就為大家分享一篇angularJs中orderBy篩選以及filter過濾數(shù)據(jù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Angular4學(xué)習筆記之準備和環(huán)境搭建項目
這篇文章主要介紹了Angular4學(xué)習筆記之準備和環(huán)境搭建項目,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08完美解決UI-Grid表格元素中多個空格顯示為一個空格的問題
下面小編就為大家?guī)硪黄昝澜鉀QUI-Grid表格元素中多個空格顯示為一個空格的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04