13518219792
这篇文章主要介绍如何打包优化Angular6项目，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
可以从以下三个角度优化：
输出包体组成分析文件
Rollup 摇树优化
导出Webpack配置，通过修改webpack配置优化打包
让我们来逐一分析。
输出包体组成分析文件
Webpack 有一个非常好用的工具叫 webpack-bundle-analyzer，会自动分析包体组成结构，并以一种可视化的方式显示。
使用步骤:
打开项目，命令行输入：npm install webpack-bundle-analyzer --save-dev
命令行输入项目打包命令加--stats-json
在package.json文件的"scripts"里配置里，添加"bundle-report": "webpack-bundle-analyzer dist/wp/stats.json"
命令行输入：npm run bundle-report
浏览器输入：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许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
