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 相关文章推荐
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
vue组件tabbar使用方法详解
Nov 06 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
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
详细介绍Python的鸭子类型
2016/09/12 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
用canvas显示验证码的实现
2020/04/10 HTML / CSS
天巡全球:Skyscanner Global
2017/06/20 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
查环查孕证明
2014/01/10 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
2014年宣传工作总结
2014/11/18 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
教师节老师寄语
2015/05/28 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL