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 KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 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
Terran兵种对照表
2020/03/14 星际争霸
PHP 一个随机字符串生成代码
2010/05/26 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
JS实现瀑布流效果
2020/03/07 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
大学生创业计划书的范文
2014/01/07 职场文书
商场主管竞聘书
2014/03/31 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
婚宴父亲致辞
2015/07/27 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL