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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
Vue自定义指令详解
Jul 28 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 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制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
php实现每日签到功能
2018/11/29 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
环保公益策划方案
2014/08/15 职场文书
会计工作态度自我评价
2015/03/06 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python