Angular6项目打包优化的实现方法
可以从以下三个角度优化：
- 输出包体组成分析文件
- Rollup摇树优化
- 导出Webpack配置，通过修改webpack配置优化打包
让我们来逐一分析。
输出包体组成分析文件
Webpack有一个非常好用的工具叫webpack-bundle-analyzer，会自动分析包体组成结构，并以一种可视化的方式显示。
使用步骤:
- 打开项目，命令行输入：npminstallwebpack-bundle-analyzer--save-dev
- 命令行输入项目打包命令加--stats-json
- 在package.json文件的"scripts"里配置里，添加"bundle-report":"webpack-bundle-analyzerdist/wp/stats.json"
- 命令行输入：npmrunbundle-report
- 浏览器输入：http://127.0.0.1:8888/查看分析图，根据分析图了解一些优化的细节
备注：在不影响性能的情况下，尽量少用Base64引入图片，把图片放在本地引入，不会打包到项目中去，但使用Base64编码的图片，会以图片的1.5倍体积打包到项目中去，且若该图片为精灵图，使用图片时采取了div切图，切了几次，就会打包几次，占用体积非常大。具体可以参考以下：https://www.imooc.com/article/27804
Rollup摇树优化
所谓Rollup是指Webpack2会把那些应用中未使用的引用代码除掉，但不会删除这些代码，所以就需要配合UglifyJs能够智能的
移除这些未使用的代码。从而减少包体大小。
而Agnular应用是基于Typescript，因此AngularCli提供了一个叫AngularBuildOptimizer插件，将Typescript编译结果转化成更友好的UglifyJs版本。这样UglifyJs就能够更有效的移除那些未使用的代码
方法一：AngularCli只需要在打包命令中加上--build-optimizer参数就可以，在一些情况下压缩的还是很厉害的（但我做优化的过程中，使用了这样的方法，毫无作用）
方法二：去掉没有用到的模块，从而减小体积
1、moment
对于ng-cli的项目:
（1）运行npmuninstallmoment
（2）运行npminstallmoment--save-dev
（3）.angular-cli.json文件的scripts
里加上"../node_modules/moment/min/moment.min.js"
（4）typings.d.ts文件的最后加上declarevarmoment:any;
（5）将项目中的代码import*asmomentfrom'moment';全部干掉
备注：如果想应用其中某个库则需要（以fr为例）
引入：import"moment/locale/fr";
使用：moment.locale("fr");
对于webpack的项目：
（1）在webpack配置文件的plugins里加上
newwebpack.ContextReplacementPlugin(/moment[\/\\]locale$/,//)
或者
newwebpack.IgnorePlugin(/^\.\/locale$/,/moment$/)
备注：如果想应用其中某个库则需要（以de、fr、hu为例），在webpack配置文件的plugins里加上
newwebpack.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]
})
exportclassAppModule{
}
//其他需要模块
import{NgbModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations:[OtherComponent,...],
imports:[NgbModule,...],
})
exportclassOtherModule{
}
更改为：
//根模块
import{NgbDatepickerModule,NgbTimepickerModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations:[AppComponent,...],
imports:[NgbDatepickerModule.forRoot(),NgbTimepickerModule.forRoot()...],
bootstrap:[AppComponent]
})
exportclassAppModule{
}
//其他需要模块
import{NgbDatepickerModule,NgbTimepickerModule}from'@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations:[OtherComponent,...],
imports:[NgbDatepickerModule,NgbTimepickerModule,...],
})
exportclassOtherModule{
}
导出Webpack配置
方法一：eject（Angular6可能不支持）
方法二：工具库ngx-build-plus
我期望通过导出Webpack配置的方式，使scss文件与main.js打包分离，仍在实践中，成功后续更。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。