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 相关文章推荐
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
js实现不重复导入的方法
Mar 02 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
js tab 选项卡
2009/04/26 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
学年末自我鉴定
2014/01/21 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
房展策划方案
2014/06/07 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
雷锋的观后感
2015/06/10 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
七年级作文之下雨天
2019/12/23 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python