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 相关文章推荐
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
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
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
js parseInt("08")未指定进位制问题
2010/06/19 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
python操作xml文件示例
2014/04/07 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
什么是Rollback Segment
2013/04/22 面试题
行政内勤岗位职责
2014/04/07 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
比赛主持人开场白
2015/05/29 职场文书
Python竟然能剪辑视频
2021/05/25 Python
Java实现多文件上传功能
2021/06/30 Java/Android