您好,登錄后才能下訂單哦!
這篇文章主要介紹如何打包優(yōu)化Angular6項(xiàng)目,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
可以從以下三個(gè)角度優(yōu)化:
輸出包體組成分析文件
Rollup 搖樹優(yōu)化
導(dǎo)出Webpack配置,通過修改webpack配置優(yōu)化打包
讓我們來逐一分析。
輸出包體組成分析文件
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)化的過程中,使用了這樣的方法,毫無作用)
方法二:去掉沒有用到的模塊,從而減小體積
1、moment
對于 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è)庫則需要(以 fr 為例)
引入:import "moment/locale/fr";
使用:moment.locale("fr");
對于 webpack 的項(xiàng)目:
(1)在 webpack 配置文件的 plugins 里加上
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, / /)
或者
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
備注:如果想應(yīng)用其中某個(gè)庫則需要(以 de、fr、hu 為例),在 webpack 配置文件的 plugins 里加上new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)
2、@ng-bootstrap/ng-bootstrap
如果在項(xiàng)目中要用到 @ng-bootstrap/ng-bootstrap 庫,要注意一下使用方法,如果按照其官網(wǎng)示例方式引入的話,在打包的時(shí)候會(huì)把其下所有模塊引入進(jìn)來,不管你用沒用到。所以要想辦法把沒有用到的模塊干掉,只引入需要的模塊。
以時(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可能不支持)
方法二:工具庫ngx-build-plus
我期望通過導(dǎo)出Webpack配置的方式,使scss文件與main.js打包分離,仍在實(shí)踐中,成功后續(xù)更。
以上是“如何打包優(yōu)化Angular6項(xiàng)目”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。