angular共享依赖的解决方案分享

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共享依赖解决内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解AngularJS中的依赖注入机制

    详解AngularJS中的依赖注入机制

    依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式.这减轻一个组成部分,从定位的依赖,依赖配置.这有助于使组件可重用,维护和测试. AngularJS提供了一个至高无上的依赖注入机制.它提供了一个可注入彼此依赖下列核心组件. 值 工厂 服务 提供者 常值 值 值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器. //define a module var mainApp = angular.module("mainApp", []);

  • 深入理解Angular中的依赖注入

    深入理解Angular中的依赖注入

    一.什么是依赖注入 控制反转(IoC) 控制反转的概念最早在2004年由Martin Fowler提出,是针对面向对象设计不断复杂化而提出的一种设计原则,是利用面向对象编程法则来降低应用耦合的设计模式. IoC强调的是对代码引用的控制权由调用方转移到了外部容器,在运行是通过某种方式注入进来,实现了控制反转,这大大降低了程序之间的耦合度.依赖注入是最常用的一种实现IoC的方式,另一种是依赖查找. 依赖注入(Dependency Injection) 当然,按照惯例我们应该举个例子, 哦对,我们主要

  • 浅谈Angular6的服务和依赖注入

    在开发中,组件一般用来写视图有关的功能,服务则写一些其他的逻辑,诸如从服务器获取数据.验证用户输入或直接往控制台中写日志等工作. 先解释两个概念: Providers(提供商):是个比较抽象的名词,我们把它想象为'图纸'更好理解一些,就比如我们想要生产汽车,就需要先有汽车的图纸,图纸上记录了生产工艺和材料尺寸之类,这样汽车才生产的出来.provider通常就是自己写的服务类. Injector(注入器):就是字面上的意思,将某一类事物注入到另一类事物中的工具.angular应用在启动时,会自动创

  • AngularJs动态加载模块和依赖注入详解

    废话不多说,进入正题... 首先我们看下文件结构: Angular-ocLazyLoad --- demo文件夹 Scripts --- 框架及插件文件夹 angular-1.4.7 --- angular 不解释 angular-ui-router --- uirouter 不解释 oclazyload --- ocLazyload 不解释 bootstrap --- bootstrap 不解释 angular-tree-control-master --- angular-tree-cont

  • AngularJS学习笔记之依赖注入详解

    AngularJS学习笔记之依赖注入详解

    最近在看AngularJS权威指南,由于各种各样的原因(主要是因为我没有money,好讨厌的有木有......),于是我选择了网上下载电子版的(因为它不要钱,哈哈...),字体也蛮清晰的,总体效果还不错.但是,当我看到左上角的总页码的时候,479页....479....479....俺的小心脏被击穿了二分之一有木有啊,上半身都石化了有木有啊,那种特别想学但是看到页码又不想学的纠结的心情比和女朋友吵架了还复杂有木有啊,我平常看的电子书百位数都不大于3的好伐! 哎,原谅我吧,我应该多看几本新华字典习

  • Angular 4依赖注入学习教程之Injectable装饰器（六）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • AngularJS $injector 依赖注入详解

    推断式注入 这种注入方式,需要在保证参数名称与服务名称相同.如果代码要经过压缩等操作,就会导致注入失败. app.controller("myCtrl1", function($scope,hello1,hello2){ $scope.hello = function(){ hello1.hello(); hello2.hello(); } }); 标记式注入 这种注入方式,需要设置一个依赖数组,数组内是依赖的服务名字,在函数参数中,可以随意设置参数名称,但是必须保证顺序的一致性. v

  • angular共享依赖的解决方案分享

    webpack-ng-dll-plugin ng版本可用的dll插件,路子比较野 用途 提高打包速度 代码复用(微前端依赖共享) 使用 首先根据个人熟悉程度选择@angular-devkit/build-webpack,@angular-builders/custom-webpack,ngx-build-plus 第一个是官方的,后两个是第三方的,但是确认你有练过之前,请不要选择官方的... 作者在测试的时候选择的是@angular-builders/custom-webpack 先构建dll,

  • Angular 4依赖注入学习教程之组件服务注入（二）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • Angular 4依赖注入学习教程之ValueProvider的使用（七）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • Angular 4依赖注入学习教程之简介（一）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • Angular 4依赖注入学习教程之InjectToken的使用（八）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • Angular 4依赖注入学习教程之FactoryProvider配置依赖对象（五）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • Angular 4依赖注入学习教程之ClassProvider的使用（三）

    Angular 4依赖注入学习教程之ClassProvider的使用（三）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • springboot 打包部署 共享依赖包（分布式开发集中式部署微服务）

    springboot 打包部署 共享依赖包（分布式开发集中式部署微服务）

    1.此文初衷 平常我们在进行微服务开发完毕后,单个微服务理应部署单个虚机上(docker也可),然后服务集中发布到服务注册中心上,但是有些小的项目,这样做未免太过繁杂增加了部署难度,这里主要讲述的是如何在单机上通过共享jar包的方式来部署多个微服务,解决以上部署难度同时在带宽不够或者网速慢的情况下如何快速的发布部署. 2.部署目录结构   部署目录解答-> 各个微服务与依赖包(lib文件夹下)在同一级目录下,此为图1内容.图二内容展示的是单个微服务内的文件结构,部署配置文件以及所打的jar包,这

  • Angular 4 依赖注入学习教程之FactoryProvider的使用（四）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

随机推荐