webpack环境注入模块到全局

概述

工程化的项目中,一般都是模块化的形式引入对应的依赖包,并不会将其注入到全局变量中,在微前端中,基座项目(主应用)和子应用直接肯定存在依赖的重叠,因此公共的三方包需要提取共用,而这些公共模块,放到主应用中,然后子应用打包排除对应的公共包即可,这样可以节省大量的资源。

实现方式

1、cdn

把对应公共资源单独部署到cdn上,然后主应用中引入加载,主应用和子应用都通过构建工具进行排包,示例如下: 以vue项目为例,公共资源位:vue axios vue-router vuex等

修改主应用和子应用 vue.config.js

js 复制代码
module.exports = {
  configureWebpack: {
    externals: {
      // 键是包名,值是全局变量名
      vue: 'Vue',
      'vue-router': 'VueRouter',
      axios: 'axios',
      lodash: '_'
    }
  }
}

主应用的index.html中cdn引入

将公共的资源单独部署,然后cdn方式引入 index.html示例如下:

js 复制代码
<head>
  <!-- Vue 相关 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.2/dist/vue-router.min.js"></script>
  
  <!-- 其他库 -->
  <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
</head>

2、expose-loader

这种方式更为内聚,不用单独cdn引入,直接将主应用的公共模块包注入到全局中,然后子应用排包使用即可。

expose-loader是什么?

expose-loader 允许暴露一个模块(整体或者部分)给全局对象(selfwindowglobal)。

实现

注意:expose-loader版本的不同,用法也会有差异,这里有坑,可以使用的时候查阅文档

js 复制代码
// eslint-disable-next-line @typescript-eslint/no-var-requires
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
/* eslint-disable @typescript-eslint/no-var-requires */
const prod = process.env.NODE_ENV === 'production';

module.exports = {
  configureWebpack: (config) => {
  //s----重点
    config.module.rules.push({
      test: require.resolve('vue'),
      use: [{
        loader: 'expose-loader',
        options: {
          exposes: 'MyVue'//暴露到window的属性名
        }
      }]
    })
    config.module.rules.push({
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: {
          exposes: 'JQuery'
        }
      }]
    })
    config.module.rules.push({
      test: require.resolve('@qbee/fe-vue-contacts'),
      use: [{
        loader: 'expose-loader',
        options: {
          exposes: 'FeVueContacts'
        }
      }]
    })
  
    }
  },
  parallel: require('os').cpus().length > 1,
  devServer: {
    hot: true,
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 2459,
    https: false,
    hotOnly: false,
    proxy: prod
      ? null
      : {
          '/': {
            target: process.env.APP_PROXY_URL, // 服务器地址
            changeOrigin: true, // 是否跨域,
            ws: false
          }
        }
  }
};

总结

对应大平台,集群项目来说,公共资源抽离出去可以减少很大一部分资源请求的消耗时间,提升用户体验。

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript