角Cli打包的示例分析

　　介绍

这篇文章主要介绍了角Cli打包的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

<强>一、引言

角从开发再到生产环境部署都离不开角Cli工具集,而角Cli本质上是使用Webpack(当前使用版本为2)来打包资源。

Webpack本身并不复杂,略用过一点都清楚,只需要创建一个webpack.config。js的文件并简单的配置,就可以把一个复杂的应用所有文件全部打包成若干静态资源文件。

然而一个复杂的应用免不了使用到第三方类库,当这些外部类库与自身业务脚本联系在一起时,就产生一个大家都关心的问题:性能优化。

角Cli在构建一个含有路,由表单,HTTP等基本的角应用大约在150 kb左右,就角体量而言,自己写一个Webpack也很难能优化到这个大小,所以说,角Cli是很有良心的作品。然而极大的简化对Webpack的使用,何乐不为呢?

本文我将介绍角Cli的一些配置在生产环境中所产生的效果,希望能让大家由于一些不合理的行为可能会导致文件体量的上升在改善这一问题时有所帮助。

<强>二,.angular-cli。json配置

角Cli的配置文件是根目录下的.angular-cli。json,而会影响文件体量的只有风格,脚本两个节点。

<强> 1,脚本

脚本节点最后会生成一个独立的scripts.bundle。js文件,一般我们会把一些外部非角组件的类库放置在这里,比如:jQuery。

“scripts":, 　　,“. ./node_modules/jquery/dist/jquery.js", 　　,“. ./test.ts" 　　)

脚本节点还允许*。ts文件。

<强> 2,样式

风格节点最后会生成一个独立的styles.bundle。css文件。除此之外,组件内(风格或styleUrls)的样式会全部打包进js文件中。

正如jQuery一样,如果我们需要引用第三方UI库,比如:引导那么:

“styles":, 　　,“. ./node_modules/引导/scss/bootstrap.scss", 　　,“styles.scss" 　　)

默认情况引用的是。/src/风格。scss,你可以继续导入外部其它外部样式文件。

@import “variables"; 　　@import “nav"; 　　@import “layout";

<强>组件类样式

角组件内使用风格或styleUrls的样式会全部打包进相应模块的js文件中,并且样式生成存储的方式是无法改变的。

顺封装带提一下。既然是角组件,如果说此时还需要外部的样式这显得有点框住组件独立性的特点,然而组件样式是否污染其它组件呢?我们通过指定封装样式封装方式来改变这一些行为,它包括三个值:

<李>

<代码> ViewEncapsulation。模拟> <李>

<代码> ViewEncapsulation。本机采用影子Dom隔离方式

<李>

<代码> ViewEncapsulation。没有>

<强>三,ng构建指令

角Cli会根据.angular-cli。json配置(应用/根,应用/主要)决定从哪里开始启动。因此,当执行:

ng  build ——prod  build-optimizer

<代码>——build-optimizer>

会从根模块开始逐一对每一个模块进行打包,并保存在每一个文件当中。若采用路由迟延加载模块的话,会在内联。js中加上相应的动态加载脚本代码。

<强> 1,文件名哈希

角Cli提供了<代码>——output-hashing> 模式说明没有不哈希所有所有(若,——prod 时默认)媒体限资源文件包限webpack打包后的js文件

<强>注意:这里并不会哈希资产文件夹,因为该文件夹采用是直接复制的形式。

<强> 2,指定输出

角应用很多时候可能是放在现有WEB服务的某个目录下(例如:v2),因此,访问地址会变成:https://www.demo.com/v2。但会发现,无法加载应用,这是由索引。html会包括一句:

& lt; base  https://www.yisu.com/zixun/href="/" rel="外部nofollow”>

倒置所有脚本资源的加载URL指向根目录.Angular Cli提供一个参数改变该值。

ng  build ——prod ——bh /v2/

往往在开发过程中总需要依赖一些图片资源的访问,倘若在代码中采用绝对路径,那就懵逼了,所以建议不要在代码中使用绝对路径访问资源文件。

角Cli打包的示例分析