如何打包优化Angular6项目-创新互联

这篇文章主要介绍如何打包优化Angular6项目,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联公司公司2013年成立,先为临高等服务建站,临高等地企业,进行企业商务咨询服务。为临高企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

可以从以下三个角度优化:

  • 输出包体组成分析文件

  • Rollup 摇树优化

  • 导出Webpack配置,通过修改webpack配置优化打包

让我们来逐一分析。

输出包体组成分析文件

Webpack 有一个非常好用的工具叫 webpack-bundle-analyzer,会自动分析包体组成结构,并以一种可视化的方式显示。

使用步骤:

  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/ 查看分析图,根据分析图了解一些优化的细节

备注:在不影响性能的情况下,尽量少用Base64引入图片,把图片放在本地引入,不会打包到项目中去,但使用Base64编码的图片,会以图片的1.5倍体积打包到项目中去,且若该图片为精灵图,使用图片时采取了div切图,切了几次,就会打包几次,占用体积非常大。具体可以参考以下:https://www.imooc.com/article/27804

Rollup 摇树优化

所谓Rollup是指Webpack2会把那些应用中未使用的引用代码除掉,但不会删除这些代码,所以就需要配合 UglifyJs 能够智能的

移除这些未使用的代码。从而减少包体大小。

而Agnular应用是基于Typescript,因此Angular Cli提供了一个叫 Angular Build Optimizer 插件,将 Typescript 编译结果转化成更友好的UglifyJs版本。这样UglifyJs就能够更有效的移除那些未使用的代码

方法一:Angular Cli只需要在打包命令中加上 --build-optimizer 参数就可以,在一些情况下压缩的还是很厉害的(但我做优化的过程中,使用了这样的方法,毫无作用)

方法二:去掉没有用到的模块,从而减小体积

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';全部干掉

备注:如果想应用其中某个库则需要(以 fr 为例)

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

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

对于 webpack 的项目:

(1)在 webpack 配置文件的 plugins 里加上

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

或者

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

备注:如果想应用其中某个库则需要(以 de、fr、hu 为例),在 webpack 配置文件的 plugins 里加上
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)

2、@ng-bootstrap/ng-bootstrap

如果在项目中要用到 @ng-bootstrap/ng-bootstrap 库,要注意一下使用方法,如果按照其官网示例方式引入的话,在打包的时候会把其下所有模块引入进来,不管你用没用到。所以要想办法把没有用到的模块干掉,只引入需要的模块。

以时间组件为例,官网示例:

// 根模块
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 {
}

导出Webpack配置

方法一:eject(Angular6可能不支持)

方法二:工具库ngx-build-plus

我期望通过导出Webpack配置的方式,使scss文件与main.js打包分离,仍在实践中,成功后续更。

以上是“如何打包优化Angular6项目”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享名称:如何打包优化Angular6项目-创新互联
文章转载:http://scyanting.com/article/cdjgec.html