Angular6項(xiàng)目打包優(yōu)化的實(shí)現(xiàn)方法
可以從以下三個(gè)角度優(yōu)化:
- 輸出包體組成分析文件
- Rollup 搖樹優(yōu)化
- 導(dǎo)出Webpack配置,通過(guò)修改webpack配置優(yōu)化打包
讓我們來(lái)逐一分析。
輸出包體組成分析文件
Webpack 有一個(gè)非常好用的工具叫 webpack-bundle-analyzer,會(huì)自動(dòng)分析包體組成結(jié)構(gòu),并以一種可視化的方式顯示。
使用步驟:
- 打開項(xiàng)目,命令行輸入:
npm install webpack-bundle-analyzer --save-dev
- 命令行輸入項(xiàng)目打包命令加--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)化的細(xì)節(jié)
備注:在不影響性能的情況下,盡量少用Base64引入圖片,把圖片放在本地引入,不會(huì)打包到項(xiàng)目中去,但使用Base64編碼的圖片,會(huì)以圖片的1.5倍體積打包到項(xiàng)目中去,且若該圖片為精靈圖,使用圖片時(shí)采取了div切圖,切了幾次,就會(huì)打包幾次,占用體積非常大。具體可以參考以下:https://www.imooc.com/article/27804
Rollup 搖樹優(yōu)化
所謂Rollup是指Webpack2會(huì)把那些應(yīng)用中未使用的引用代碼除掉,但不會(huì)刪除這些代碼,所以就需要配合 UglifyJs 能夠智能的
移除這些未使用的代碼。從而減少包體大小。
而Agnular應(yīng)用是基于Typescript,因此Angular Cli提供了一個(gè)叫 Angular Build Optimizer 插件,將 Typescript 編譯結(jié)果轉(zhuǎn)化成更友好的UglifyJs版本。這樣UglifyJs就能夠更有效的移除那些未使用的代碼
方法一:Angular Cli只需要在打包命令中加上 --build-optimizer 參數(shù)就可以,在一些情況下壓縮的還是很厲害的(但我做優(yōu)化的過(guò)程中,使用了這樣的方法,毫無(wú)作用)
方法二:去掉沒(méi)有用到的模塊,從而減小體積
1、moment
對(duì)于 ng-cli 的項(xiàng)目:
(1)運(yùn)行npm uninstall moment
(2)運(yùn)行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)將項(xiàng)目中的代碼 import * as moment from 'moment';
全部干掉
備注:如果想應(yīng)用其中某個(gè)庫(kù)則需要(以 fr 為例)
引入:import "moment/locale/fr";
使用:moment.locale("fr");
對(duì)于 webpack 的項(xiàng)目:
(1)在 webpack 配置文件的 plugins 里加上
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, / /)
或者
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
備注:如果想應(yīng)用其中某個(gè)庫(kù)則需要(以 de、fr、hu 為例),在 webpack 配置文件的 plugins 里加上
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)
2、@ng-bootstrap/ng-bootstrap
如果在項(xiàng)目中要用到 @ng-bootstrap/ng-bootstrap 庫(kù),要注意一下使用方法,如果按照其官網(wǎng)示例方式引入的話,在打包的時(shí)候會(huì)把其下所有模塊引入進(jìn)來(lái),不管你用沒(méi)用到。所以要想辦法把沒(méi)有用到的模塊干掉,只引入需要的模塊。
以時(shí)間組件為例,官網(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可能不支持)
方法二:工具庫(kù)ngx-build-plus
我期望通過(guò)導(dǎo)出Webpack配置的方式,使scss文件與main.js打包分離,仍在實(shí)踐中,成功后續(xù)更。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
使用AngularJS 應(yīng)用訪問(wèn) Android 手機(jī)的圖片庫(kù)
這篇文章主要介紹了使用AngularJS 應(yīng)用訪問(wèn) Android 手機(jī)的圖片庫(kù)的相關(guān)資料,需要的朋友可以參考下2015-03-03angularJs中orderBy篩選以及filter過(guò)濾數(shù)據(jù)的方法
今天小編就為大家分享一篇angularJs中orderBy篩選以及filter過(guò)濾數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09angularjs實(shí)現(xiàn)與服務(wù)器交互分享
AngularJS是Google開發(fā)的純客戶端JavaScript技術(shù)的WEB框架,用于擴(kuò)展、增強(qiáng)HTML功能,它專為構(gòu)建強(qiáng)大的WEB應(yīng)用而設(shè)計(jì)。2014-06-06Angular4學(xué)習(xí)筆記之準(zhǔn)備和環(huán)境搭建項(xiàng)目
這篇文章主要介紹了Angular4學(xué)習(xí)筆記之準(zhǔn)備和環(huán)境搭建項(xiàng)目,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08完美解決UI-Grid表格元素中多個(gè)空格顯示為一個(gè)空格的問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決UI-Grid表格元素中多個(gè)空格顯示為一個(gè)空格的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04AngularJs 最新驗(yàn)證手機(jī)號(hào)碼的實(shí)例,成功測(cè)試通過(guò)
下面小編就為大家分享一篇AngularJs 最新驗(yàn)證手機(jī)號(hào)碼的實(shí)例,成功測(cè)試通過(guò),具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11