在Angular 项目中，我们完成每一个版本的更迭的时候，会编译和发布这一版本。但当我们编译完成后，会发现main.js 比较大, 比如下面的这个
会发现它有29.6MB 大小。
效果图：
当我们使用angular 的分析工具时发现在main.js 中 less 文件占总大小的50%以上。
为什么会这样？
此时会发现，我们将整个的colors.less 文件导入到了
在研究less文件的时候发现，会有一些通用的样式。比如下面的colors.less
我们定义了很多基础的颜色，这样在其他的component的 less 文件中，我们就可以使用统一的颜色以便后期更改，那么我们就需要在这个less 文件中 导入 colors.less 以便使用。如下
这个样式文件中，这样会使得编译后在main.js 的less 文件会有冗余。那么就需要找到一种方法去除在main.js 的less 冗余。
解决：
less 提供了导入选项 （reference）
当使用 @import （reference） ‘xxx.less’ 导入外部文件，只会将使用的样式添加到编译输出中，否则其他未使用的样式都不会添加编译输出中。
当我们把项目中所有的@import 添加（reference）后的main.js 就从之前的29.6 MB 降到14.3MB。
效果图：
