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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
bootstrap multiselect下拉列表功能
Aug 22 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
JavaScript多种图形实现代码实例
Jun 28 Javascript
详解js中的几种常用设计模式
Jul 16 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
php中static静态变量的使用方法详解
2010/06/04 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
突发奇想的一个jquery插件
2010/11/19 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
详解Vite的新体验
2021/02/22 Javascript
Python的time模块中的常用方法整理
2015/06/18 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
简单了解python列表和元组的区别
2020/05/14 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
用python进行视频剪辑
2020/11/02 Python
Python 可视化神器Plotly详解
2020/12/26 Python
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
财务情况说明书范文
2014/05/06 职场文书
公司联欢会策划方案
2014/05/19 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技