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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
js获取视频时长代码
Apr 10 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 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中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
JQuery index()方法使用代码
2010/06/02 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
Vue header组件开发详解
2018/01/26 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
js实现开关灯效果
2020/03/30 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
wxPython窗口的继承机制实例分析
2014/09/28 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
python梯度下降法的简单示例
2018/08/31 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
Pycharm中如何关掉python console
2020/10/27 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
机电一体化求职信
2014/03/10 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
教师教育教学随笔
2015/08/15 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
详解Python requests模块
2021/06/21 Python