Angular6项目打包优化的实现方法


Posted in Javascript onDecember 15, 2019

可以从以下三个角度优化:

  • 输出包体组成分析文件
  • Rollup 摇树优化
  • 导出Webpack配置,通过修改webpack配置优化打包

让我们来逐一分析。

输出包体组成分析文件

Webpack 有一个非常好用的工具叫 webpack-bundle-analyzer,会自动分析包体组成结构,并以一种可视化的方式显示。

使用步骤:

  1. 打开项目,命令行输入:npm install webpack-bundle-analyzer --save-dev
  2. 命令行输入项目打包命令加--stats-json
  3. 在package.json文件的"scripts"里配置里,添加"bundle-report": "webpack-bundle-analyzer dist/wp/stats.json"
  4. 命令行输入:npm run bundle-report
  5. 浏览器输入: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打包分离,仍在实践中,成功后续更。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 #Javascript
Vue+ElementUI table实现表格分页
Dec 14 #Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 #Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 #Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 #Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 #Javascript
Vue分页效果与购物车功能
Dec 13 #Javascript
You might like
如何判断php数组的维度
2013/06/10 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
csdn 批量接受好友邀请
2009/02/19 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
解释&&和||在javascript中的另类用法
2014/07/28 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
python中正则的使用指南
2016/12/04 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
详解python的四种内置数据结构
2019/03/19 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
Python os模块常用方法和属性总结
2020/02/20 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
.net笔试题
2014/03/03 面试题
秋季运动会广播稿大全
2014/02/17 职场文书
外联部演讲稿
2014/05/24 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
失恋33天观后感
2015/06/11 职场文书
初中政治教学工作总结
2015/08/13 职场文书