当我们开发完一个Angular应用的时候,如果有vue开发经验的,vue-cli有 npm run build 命令,一键式将资源打包成生产模式。同样,在angular的应用中,如果是angular-cli构建的项目,也有 ng build 命令,但是如果不加参数,默认是dev环境打包,所以我们在线上环境的时候,需要用 ng build –prod 命令。同样是构建,你知道 ng build –dev 与 ng build –prod 的打包区别吗?

总结下来应该有以下5点:

1、source map[map 文件]

dev模式在打包的时候会生成map文件,而生产模式则不会打包。不熟悉map文件作用的这里做简单的介绍,map文件的作用就是为了在应用资源在压缩后,如果出现错误,因为是压缩的资源,变量及方法名称都经过最简化处理,所以我们很难定位,这时map文件就将发挥作用,它可以帮我们在资源文件快速定位到错误的具体行号。

source map文件帮我们快速定位线上bug。但是你不想生成source map文件的话,我们可以使用 ng build –dev -sm false。同样,如果你想在prod环境生成source map文件,则也可以将其设置为true即可。

2、extract css [css样式单独抽取]

在开发环境构建的时候,css文件是不会单独抽出来打包成css文件,而是融合在js文件中,而在生产环境则相反。

当然在开发环境build的时候,我们也可以通过 ng build –dev -ec true 来将样式文件单独抽离出来打包成css文件,只不过在prod环境默认设置成了true而已。

3、Minification and Uglification[资源压缩]

在生产环境打包的时候代码是经过压缩及beatufiy的。这里简单说下,代码压缩包括对代码的空格、换行及注释的处理,beautify处理就是将我们的代码变量及方法名、参数名经过最简化处理。这两个过程都是为了减少及压缩线上代码体积的大小。

4、Tree Shaking[去除不必要的资源]

生产环境打包模式的时候,代码是经过tree shaking处理的,而开发环境打包模式是没有的。这里讲一个概念,什么是tree shaking?打过比方,tree shaking就是相当于去除我们实际在线上没有用过到的代码。举一例子:比如我们在写代码的过程中,写了一个组件,但是我们在实际过程中没有用到这个组件,那么在实际打包过程,是不会将这个组件打包到最终的bundle里面的。tree shaking形象化来理解就是通过摇曳去除那些枯叶【没用的代码】。

5、AOT(Ahead-Of-Time) Compilation[预编译资源]

开发环境模式的编译模式是JIT编译模式,而生产环境的编译模式是AOT编译模式。这里说明下什么是AOT、JIT编译模式。AOT编译模式是指angular的模块及组件都是提前编译好的,所以当浏览器在懒加载到某个模块或组件的时候,它的响应相对来说会快些;而JIT编译模式则不会,它会相应的编译后才会出现来。当然AOT编译模式还具有其他的优势,比如减少实际的打包体积,同时如果应用本身在打包的过程如果出错的话,是会编译报错,不会打包成功。

发表评论