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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
swiper自定义分页器的样式
Sep 14 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使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
function foo的原型与prototype属性解惑
2010/11/19 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
js数组操作常用方法
2014/05/08 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
python单元测试unittest实例详解
2015/05/11 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
python实现udp聊天窗口
2020/03/31 Python
python如何求100以内的素数
2020/05/27 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
知识竞赛拉拉队口号
2014/06/16 职场文书
学习十八大的心得体会
2014/09/12 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis
springboot读取nacos配置文件
2022/05/20 Java/Android