qiankun 如何提取出公共的依赖库

已于 2022-06-03 10:05:44 修改
阅读量4k 收藏 13
点赞数 5
分类专栏： 微前端 文章标签： qiankun 提取公共依赖
于 2022-06-03 09:36:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lyrelion/article/details/124896392
版权

目录

1. 为什么要提取公共依赖

2. 如何提取公共依赖

2.1 基本思路

2.2 改造主应用

2.2.1 修改目录、添加配置文件及资源

2.2.2 config-webpack.js

2.2.3 一些说明

2.3 添加微应用配置

2.3.1 同步获取在线文件（require-from-url）

2.3.2 读取线上 Webpack 配置文件

2.2.3 生成一个 HTML5 文件（html-webpack-plugin）

2.3.4 修改 vue.config.js

2.3.5 修改微应用 public > index.html

2.4 添加主应用配置

2.4.1 修改 vue.config.js

2.4.2 修改主应用 public > index.html

1. 为什么要提取公共依赖

可以看 qiankun issue 上的一些讨论：

提取公共依赖 doc · Issue #581 · umijs/qiankun · GitHubhttps://github.com/umijs/qiankun/issues/581

以主应用和微应用都采用 Vue3 开发为例，提取公共依赖的目的：

  • 减少相同资源的重复加载
  • 资源版本不同步
  • 打包文件庞大

2. 如何提取公共依赖

2.1 基本思路

  1.  相同依赖 采用 CDN 的方式加载，并把 所有依赖的 CDN 链接 统一放到一个文件中进行管理
  2. 把存放 CDN 链接的文件，引入到 vue.config.js 中去
  3. 在项目打包时，添加忽略部分文件打包的配置，把以CDN方式加载的依赖忽略掉
  4. 把CDN加载的链接，动态添加到 index.html 中去

2.2 改造主应用

2.2.1 修改目录、添加配置文件及资源

  1. 在主应用的 public 下新建 global > config 文件夹，用于存放 全部应用公共接口地址配置、微应用配置、公共依赖 CDN 地址 等内容
  2. 在 config 文件夹下 新建 api-config.js，用于存放全部应用公共接口地址配置
  3. 在 config 文件夹下 新建 config-micro-app.js，用于存放微应用配置
  4. 在 config 文件夹下 新建 config-webpack.js，用于存放公共依赖 CDN 地址
  5. 在主应用的 public 下新建 libs 文件夹，用于存放各种依赖包

目录结构整体如下：

2.2.2 config-webpack.js

config-webpack.js 文件中包含如下内容：

  • webpack 打包忽略文件配置
  • CDN 公共依赖地址

微应用中的依赖，就是读取主应用中的 config-webpack.js 这个配置文件

把项目打包部署到服务器上，public 文件夹内容不会被打包改变；因此线上项目的 public/libs 文件夹中就是依赖，依赖包的在线地址就能拿到了

综上所述，在 config-webpack.js 中，导出公共依赖地址配置

// CDN 链接（读取线上配置）
exports.cdn = {
  css: [
    'http://192.xxxx/xxxx-app/global/libs/element-plus@1.2.0-beta.3/theme-chalk/index.css',
    'http://192.xxxx/xxxx-app/global/libs/font-awesome/4.7.0/css/font-awesome.min.css',
    'http://192.xxxx/xxxx-app/global/styles/variable.css',
  ],
  js: [
    'http://192.xxxx/xxxx-app/global/libs/vue@3.2.22/vue.global.js',
    'http://192.xxxx/xxxx-app/global/libs/vue-router@4.0.12/vue-router.global.js',
    'http://192.xxxx/xxxx-app/global/libs/vuex@4.0.2/vuex.global.js',
    'http://192.xxxx/xxxx-app/global/libs/axios@0.24.0/axios.min.js',
    'http://192.xxxx/xxxx-app/global/libs/element-plus@1.2.0-beta.3/index.full.min.js',
    'http://192.xxxx/xxxx-app/global/libs/echarts@5.2.2/echarts.js',
    // 这里引入了公共接口配置
    'http://xxxx/xxxx-app/global/config/api-config.js',
  ],
};

如果没有部署项目（也就是没有依赖在线地址）也没关系，可以将微应用基座应用运行起来，通过 localhost 方式读取基座应用中的 libs 文件夹，路径如下：

// CDN 链接（读取本地配置）
exports.cdn = {
  css: [
    'http://localhost:7080/global/libs/element-plus@1.2.0-beta.3/theme-chalk/index.css',
    'http://localhost:7080/global/libs/font-awesome/4.7.0/css/font-awesome.min.css',
    'http://localhost:7080/global/styles/variable.css',
  ],
  js: [
    'http://localhost:7080/global/libs/vue@3.2.22/vue.global.js',
    'http://localhost:7080/global/libs/vue-router@4.0.12/vue-router.global.js',
    'http://localhost:7080/global/libs/vuex@4.0.2/vuex.global.js',
    'http://localhost:7080/global/libs/axios@0.24.0/axios.min.js',
    'http://localhost:7080/global/libs/element-plus@1.2.0-beta.3/index.full.min.js',
    'http://localhost:7080/global/libs/echarts@5.2.2/echarts.js',
    // 这里引入了公共接口配置
    'http://localhost:7080/global/config/api-config.js',
  ],
};

Webpack 打包时，如果使用 CDN 链接引入，则构建时要忽略相关资源，下面就是忽略打包文件的配置

// Webpack 打包时，如果使用 CDN 链接引入，则构建时要忽略相关资源
exports.externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  axios: 'axios',
  'element-plus': 'ElementPlus',
  echarts: 'echarts',
};

2.2.3 一些说明

api-config.js：

const appConfig = {
  jdpAppCode: 'DCP.DSM',
  jdpOuApiContext: 'http://xxxx/ou',
  jdpBpmApiContext: 'http://xxxx/bpm',
}

config-micro-app.js：

window.microApp = [
  {
    name: 'river-micro-app',
    entries: {
      dev: '//localhost:7081/',
      product: '//192.xxxx/xxxx-app/',
    },
    container: '#micro-app',
    activeRule: '#/layout',
  },
];

 libs / config-webpack.js 依赖包获取地址：

UNPKG - vueThe CDN for vuehttps://unpkg.com/browse/vue@3.2.22/dist/

2.3 添加微应用配置

2.3.1 同步获取在线文件（require-from-url）

由于 config-webpack.js 在主应用里，所以无法直接使用 require() 引入

微应用中采用 require-from-url 第三方依赖，实现同步获取在线文件（从节点中的URL加载模块）

require-from-url - npmRequire module from URL. Latest version: 3.1.3, last published: 3 years ago. Start using require-from-url in your project by running `npm i require-from-url`. There are 27 other projects in the npm registry using require-from-url.https://www.npmjs.com/package/require-from-url

npm install require-from-url -save-dev

官网示例：

var requireFromUrl = require('require-from-url/sync');
var HelloWorld = requireFromUrl("https://nodeway.org/HelloWorld.js");
var api = new HelloWorld;
api.on('data', console.log);

2.3.2 读取线上 Webpack 配置文件

在 vue.config.js 中，添加如下代码：

// 同步获取在线JS
const requireFromUrl = require('require-from-url/sync'); 

// 微应用 - 读取线上 Webpack 配置文件（CDN 地址配置、忽略打包文件配置）
const webpackOnline = 'http://localhost:xxxx/global/config/config-webpack.js';
const { cdn, externals } = requireFromUrl(webpackOnline);

2.2.3 生成一个 HTML5 文件（html-webpack-plugin）

HtmlWebpackPlugin | webpack 中文文档webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。https://webpack.docschina.org/plugins/html-webpack-plugin/

npm install --save-dev html-webpack-plugin

官网示例：

在 webpack 配置文件中添加如下代码，使用 htmlWebpackPlugin

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin()],
};

这将会生成一个包含以下内容的 dist/index.html （HTML5）文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>webpack App</title>
  </head>
  <body>
    // 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle
    <script src="index_bundle.js"></script>
  </body>
</html>

2.3.4 修改 vue.config.js

  1. 增加打包忽略 CDN 依赖文件的配置代码
  2. 把 CDN 链接，注入到 htmlWebpackPlugin 里（htmlWebpackPlugin 主要是生成 html 的，在 html 中可以拿到它的值）
// 同步获取在线JS
const requireFromUrl = require('require-from-url/sync');
const { name } = require('./package');

// 微应用 - 读取线上的 Webpack 配置文件（CDN 地址配置、忽略打包文件配置）
const webpackOnline = 'http://localhost:8083/global/config/config-webpack.js';
const { cdn, externals } = requireFromUrl(webpackOnline);

// 判断是否是生产环境
const isProd = process.env.NODE_ENV === 'production';

// 静态资源的公共地址，部署到生产环境时，按需修改前项为项目名称（其中name为项目名称）
const publicPath = isProd
                   ? `http://localhost:9160/${name}/`
                   : 'http://localhost:8081';

module.exports = {
  devServer: {
    port: 8081,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  publicPath,
  // 自定义 Webpack 配置
  configureWebpack: (config) => {
    // 生产环境
    if (isProd) {
      // 去除 console
      Object.assign(
        config.optimization.minimizer[0].options.minimizer.options.compress, {
          drop_console: true,
        },
      );
    }
    
    return {
      externals, // 打包时忽略这些依赖
      output: {
        library: `${name}-[name]`,
        libraryTarget: 'umd', // 把子应用打包成 umd
      },
    };
  },

  chainWebpack: (config) => {
    config.plugin('html').tap((args) => {
      // 在 html 中，注入 CDN 链接
      args[0].cdn = cdn;
      return args;
    });
  },
};

2.3.5 修改微应用 public > index.html

把 CDN 链接，动态添加到 public/index.html 中去：在 head 结束标签前 添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- 使用 CDN 的 CSS、JS 文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" ignore rel="stylesheet">
    <% } %>
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
  </head>
</html>

2.4 添加主应用配置

2.4.1 修改 vue.config.js

由于 config-webpack.js 在主应用里，所以可以直接使用 require() 引入，不需要第三方依赖

// 主应用 - 读取本地的 Webpack 配置文件（CDN 地址配置、忽略打包文件配置）
const { cdn, externals } = require('./public/global/config/config-webpack');
  1. 增加打包忽略 CDN 依赖文件的配置代码
  2. 把 CDN 链接，注入到 htmlWebpackPlugin 里（htmlWebpackPlugin 主要是生成 html 的，在 html 中可以拿到它的值）
const { name } = require('./package');

// 主应用 - 读取本地的 Webpack 配置文件（CDN 地址配置、忽略打包文件配置）
const { externals, cdn } = require('./public/global/config/config-webpack');

// 判断是否是生产环境
const isProd = process.env.NODE_ENV === 'production';

// 静态资源的公共地址，部署到生产环境时，按需修改前项为项目名称（其中name为项目名称）
const publicPath = isProd ? `/${name}/` : '/';

module.exports = {
  devServer: {
    port: 8081,
  },
  publicPath,

  // 自定义 Webpack 配置
  configureWebpack: (config) => {
    // 生产环境
    if (isProd) {
      // 去除 console
      Object.assign(
        config.optimization.minimizer[0].options.minimizer.options.compress, {
          drop_console: true,
        },
      );
    }
    
    return {
      externals, // 打包时忽略这些依赖
    };
  },

  chainWebpack: (config) => {
    config.plugin('html').tap((args) => {
      // 在 html 中，注入 CDN 链接
      args[0].cdn = cdn;
      return args;
    });
  },
};

2.4.2 修改主应用 public > index.html

把 CDN 链接，动态添加到 public/index.html 中去：在 head 结束标签前 添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- 使用 CDN 的 CSS、JS 文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" ignore rel="stylesheet">
    <% } %>
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
  </head>
</html>

用微前端 qiankun 接入十几个子应用后，我遇到了这些问题
LuckyWinty的博客
12-18 2712
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群简单了解微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端具备以下特点：技术栈无关：主框架不限制接入应用的技术栈，子应用具备完全自主权独立开发、独立部署：既可以组合在一起运行，也可以单独运行。增量升级：在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微...
qinakun实现公共依赖的加载
weixin_43845137的博客
03-24 771
注意点：还需要给子应用的公共依赖加上 ignore 属性(这是自定义的属性，非标准属性)，qiankun在解析时发现ignore属性会自动直接忽略。若是主应用和子应用都使用了相同的库或者包(antd，aixos)，就可以用externals的方式引入，减少加载重复包导致的资源浪费。1：主应用：将所有公共依赖配置webpack的externals的方式，并且在index.html使用外链引入这些公共依赖。子应用：和主应用一样配置webpack的externals。
qiankun中public-path.js文件的作用
最新发布
m0_51429350的博客
04-02 228
【代码】qiankun中public-path.js文件的作用。
搭建一个完整的微服务系统(四)：微服务的公共依赖
yuyryd的博客
06-30 1925
        任何一个系统中，都有一个或多个基础项目，可生成jar包给所有服务依赖。在本示例中，我给大家找了一些常用的进行说明，这些内容和业务无关，大家可以直接使用。 幂等相关         这部分包括：AutoIdempotent.java、AutoIdempotentInterceptor.java、TokenService.java三个文件
微前端（乾坤）项目下，如何使用 dllplugin 打包抽取公共依赖及其中遇到的问题
weixin_43589827的博客
07-10 4566
前言 对于大型的项目，往往都需要抽取公共部分的依赖，避免依赖重复加载。而在抽取公共部分插件的时候，我们可以考虑使用 externals【Webpack的externals的使用.note 】。 可是 externals 前提是依赖都要有 cdn 或 找到它对应的 js 文件，例如：jQuery.min.js 之类的，也就是说这些依赖插件得要是支持 umd 格式的才行。 而 dll 插件可以帮助我们直接将已安装好的依赖在 node_module 中打包出来，结合 add-asset-html-webpack-
qiankun 公共依赖
u013994400的博客
01-04 2072
把 CDN 链接，注入到 htmlWebpackPlugin 里（htmlWebpackPlugin 主要是生成 html 的，在 html 中可以拿到它的值）在主应用的 public 下新建 global > config 文件夹，用于存放 全部应用公共接口地址配置、微应用配置、公共依赖 CDN 地址 等内容。在 config 文件夹下 新建 config-webpack.js，用于存放公共依赖 CDN 地址。微应用中的依赖，就是读取主应用中的 config-webpack.js 这个配置文件。
qiankun 基座下发组件
张小胖
02-16 1812
功能：qiankun 基座下发组件； 解决问题： 1、基座下发组件，先打开的子应用访问正常，后面打开的子应用不显示组件 2、使用 vue-i18n 报Cannot read property '_t' of undefined
Vue 多入口提取公共模块
总结前端开发中遇到的问题，分享前端知识
08-24 812
将公共的依赖模块提取到现有的入口chunk中，或者提取到一个新生成的chunk。让我们使用这个插件，将之前的示例中重复的lodash模块移除： webpack.config.js const path = require('path'); module.exports = { mode: 'development', entry: { index: './src/index.js', another: './src/another-module.js',
乾坤微前端 vue 多个子项目样式被影响
01-03
对于采用 Webpack 或者 Vite 构建工具链的应用程序来说，配置相应的 loader 插件也可以帮助处理多入口点下公共依赖项以及第三方库带来的潜在样式污染风险。例如 `mini-css-extract-plugin` 可以单独提取出各个子应用...
前端技术浪潮与应用
LittleRoundFace的博客
11-28 2481
2020年前端技术浪潮与应用 文章目录2020年前端技术浪潮与应用一、前端基建01.前端可视化01-1.页面可视化搭建①页面可视化背景-前端行业提效分析②业界-前端行业提效轮子：[前端可视化搭建工具业界的轮子](https://juejin.im/post/6858881797490098190)③背景-提效轮子总结归纳④智能化相关行业提效分析⑤举例可视化搭建其中的一个例子来看前端可视化——imgcookimgcook介绍-产品大图imgcook介绍-产品大图核心技术难点-智能识别表达拆解核心技术难点-智能
微前端框架调研
weixin_40398599的博客
09-23 1046
平时我们写项目的时候，都是用单页应用，用组件去拼接项目，随着我们的功能越来越复杂，我们会发现，项目中的组件越来越多，有时项目上线后，我们只想公开组件的某个部分，在更改组件后，会出现一个问题，我们需要把整个个项目重新打包，打包时间会比较长（可能修改了一个组件，打包却需要5-10分钟）。另外，组件的维护也非常不方便（可能有成千上百个组件）。除此之外，一个项目可能有多个团队去开发（比如按模块去划分，交给不同的团队去开发），这样可以面临人员众多，不好管理，团队技术栈不统一的问题。
近 20 人爆肝数周，写给初中级前端的万字高级进阶指南
yck199的博客
10-13 3499
因为微信公众号不支持打开外链，所以有兴趣获取资料的读者朋友可以公众号发送「资料」关键字或者打开 Github 链接（https://github.com/KieSun/all-of-fro...
干货分享：蚂蚁金服前端框架和工程化实践
lin123_00的博客
06-16 1686
框架发展历史 这是我们的框架发展时间线。 • 2015 年之前我们有 Sea.JS、Arale、SPM 开源技术方案，大家可以有所耳闻。 • 2015 年我们接入 React，从自研的 Roof 到 Redux 再到开源的 Dva，一步步验证我们的最佳实践，并把这些实践交给开源社区检验。 • 2017 年开始尝试了新一代的企业级前端框架，Umi 和 Bigfish，前者是从无线业务中长出来的，后者是从中台业务中长出来的。 • 一个团队出两个框架毕竟不是长久之计，后来老大直接把两拨人调到一个..
qiankun 微前端方案实践及总结
热门推荐
weixin_48726650的博客
06-22 1万+
什么是微前端？ 我们先来看两个实际的场景： 1. 复用别的的项目页面 通常，我们的后台项目都长这样： 如果我们的项目需要开发某个新的功能，而这个功能另一个项目已经开发好，我们想直接复用时。PS：我们需要的只是别人项目的这个功能页面的**「内容部分」**，不需要别人项目的顶部导航和菜单。 一个比较笨的办法就是直接把别人项目这个页面的代码拷贝过来，但是万一别人不是 vue 开发的，或者说 vue 版本、UI 库等不同，以及别人的页面加载之前操作（路由拦截，鉴权等）我们都需要拷贝过来，更重要的问题是，别人代码有
微前端公共模块复用方案
ddwddw4的博客
12-29 3998
什么是微前端？ 微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。 微前端的核心在于拆, 拆完后在合! 2018年 Single-SPA诞生了， single-spa 是一个用于前端微服务化的 JavaScript 前端解决 方案 (本身没有处理样式隔离， js 执行隔离) 实现了路由劫持和应用加载。 2019年 qiankun 基于Single-SPA, 提供了更加开箱即用的 API （ single-spa + sandbox + ...
微前端（qiankun）主应用共享React组件
wangqiaojie的博客
06-08 4222
最近需要重构一个老项目，定的方案用微前端去改造。主应用是老的项目，微应用是新的项目，由于重构时间比较紧张，子应用还需要使用父应用的一些组件。
qiankun 主项目与子项目共享依赖
qq_37309987的博客
01-02 356
一、主项目和子项目的公共依赖有：vue2、vuex、vue-router、element-ui、lodash、moment、axios，将这些公共依赖进行共享，减小子项目打包体积。五、提取完共享依赖的结果：子项目的包体积缩小了 15%。
vue项目落地(qiankun.js)微前端服务‘
飞翔的熊blabla
03-16 1208
什么是微前端？ 网上抄的： 微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时，它们也可以在共享组件的同时进行并行开发. 我的理解： 微服务就像是一个操作系统：在其中可以运行多个app。但每个app呢，又可以脱离操作系统独立运行。 为什么选择qiankun.js | qiankun.js优点 大白话： 就目前市面上没有比qiankun.js更好用的了。虽基于sing.
qiankun微前端应用间通信实现
lyn1772671980的博客
12-11 7222
通信 在开始介绍qiankun的应用通信之前，我们需要先了解微前端架构如何划分子应用。 在微前端架构中，我们应该按业务划分出对应的子应用，而不是通过功能模块划分子应用。这么做的原因有两个： 在微前端架构中，子应用并不是一个模块，而是一个独立的应用，我们将子应用按业务划分可以拥有更好的可维护性和解耦性。 子应用应该具备独立运行的能力，应用间频繁的通信会增加应用的复杂度和耦合度。 综上所述，我们应该从业务的角度出发划分各个子应用，尽可能减少应用间的通信，从而简化整个应用，使得我们的微前端架构可以更加..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lyrelion

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值