angular共享依赖的解决方案分享


Posted in Javascript onOctober 15, 2020

webpack-ng-dll-plugin

  • ng版本可用的dll插件,路子比较野

用途

  • 提高打包速度
  • 代码复用(微前端依赖共享)

使用

  • 首先根据个人熟悉程度选择@angular-devkit/build-webpack,@angular-builders/custom-webpack,ngx-build-plus

第一个是官方的,后两个是第三方的,但是确认你有练过之前,请不要选择官方的...

作者在测试的时候选择的是@angular-builders/custom-webpack

  • 先构建dll,建议使用空项目来创建dll,因为目前开发中并没考虑到一些复杂逻辑的实现及相关第三方包的依赖关系保存(full模式应该可以实现,理论)
  • 然后在构建时引用

引用就是webpack的正常引用插件就ok了

尝鲜

下面的函数过滤了index.html,styles,polyfills,License的输出,并且禁用了runtimeChunk

setNgDllPlugin(
 config,
 {
  //webpack 的out相关配置
  output: {
  filename: 'dll.js',
  },
  ngDllPluginOptions: {
   // dll的资源清单导出配置
  path: path.join(__dirname, 'dist', 'manifest.json'),
  name: 'TLIB',
  format: true,
  filter: {
   // 过滤模式,full全量,auto相对于项目,manual 手动指定过滤项(需要设置map)
   mode: 'auto',
  },
  },
 },
 options
 );

自定义

相关配置需要参考(暂时没写文档,需要查看源码)

config.plugins.push(new NgDllPlugin(option.ngDllPluginOptions));

引用

// 这里的context可以理解为代码(应用代码)相对于哪个文件夹解析(不是打包出来的dll.js,如果正确引用,你会发现把dll.js删掉,也不会影响打包),如果发现打包出来的东西没有使用这个,应该就是这个配置错了
 config.plugins.push(
 new webpack.DllReferencePlugin({
  context: path.resolve(__dirname),
  manifest: require('./dist/manifest.json'),
 })
 );

演示地址

https://github.com/wszgrcy/ng-cli-plugin-demo

可能解锁的技术

  • 分体式路由加载

正常情况下,哪怕是动态加载的路由,也是与项目一同打包,只不过是打包为两个文件

主体项目先打包,然后再单独开发懒加载路由模块

  • web-component的使用率上升

虽然ng已经实现了这个,但是由于每次一大包,就相当于打了一个单独项目,非常庞大,使用dll后则会缩小到一个可怕的程度,副作用接近0

目前(可能)存在的问题

  • 资源清单输出的是全量的引用,但是实际上,只有mode:'full'时,才等价

没修改之一主要是影响不大,加上调试需要

  • 如果生成dll的项目中有动态加载模块,可能有未知影响

dll在设计的时候根本没考虑过动态模块之类的东西,完全就是只打一个大包

尽量使用空项目生成dll

  • auto只代表当前生成项目可以达到完全引用,如果你修改了项目,那么必须重新构建项目(额.看起来比较废物的一个模式)

其实如果项目代码足够多(各种种类),修改代码是不影响的,但是比如有些引入第一次使用,或者html模板中使用了一些新的东西,都需要重新构建

待改进

主动排除一部分永远无法使用的导出

为什么dll比直接打包大

  • 即使dll打包现在使用到了ng的aot,摇树等相关优化技术,但是仍然有个致命问题,就是导出名,默认打包时,所有名字都会被优化(混淆),而dll打包就必须暴露这个名字,当完全暴露时,就会出现体积增长

目前用空项目生成出的dll(包括rxjs,router,common,core),全量暴力是440k(也就是说当其他包使用时这些文件都会在dll中查找),选择性导出最小化启动在216k作用,最终估计应该平均在300k左右

  • 目前使用的技术,只能1.全量导出,2.选择可用导出,这其实就有一个副作用存在,全量导出时.不仅一些不使用的依赖被导出了,还有些内部引用的(比如ɵangular_packages_core_core_h)也被强制导出了,从而增加了包大小

后期,其实可以整理一个永不导出的列表,进行排除,从而减小体积

  • 传统打包是多个模块打包一个模块,中间很多依赖都是属于内部依赖,所以精简了很多代码,dll的这种打包属于多模块,因此每个模块都有出口,之间的引用也是用的模块之间的引用,所以即使最小化dll也会比打包的多40k左右

总结

到此这篇关于angular共享依赖解决方案的文章就介绍到这了,更多相关angular共享依赖解决内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 通用简单的table选项卡实现
May 07 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
Aug 16 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
Vue获取微博授权URL代码实例
Nov 04 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 #Javascript
js实现点击烟花特效
Oct 14 #Javascript
vue使用Sass时报错问题的解决方法
Oct 14 #Javascript
JavaScript原生数组函数实例汇总
Oct 14 #Javascript
如何通过JS实现日历简单算法
Oct 14 #Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 #Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 #Javascript
You might like
Yii2单元测试用法示例
2016/11/12 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
python中异常捕获方法详解
2017/03/03 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Django组件content-type使用方法详解
2019/07/19 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
大学生党员自我评价范文
2014/04/09 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
舞出我人生观后感
2015/06/16 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL