将ant design pro打包的JS分离出去

最新推荐文章于 2024-04-10 05:27:10 发布

猜测7

最新推荐文章于 2024-04-10 05:27:10 发布

阅读量357

点赞数

文章标签： javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/guozhicaice/article/details/129407799

版权

文章讲述了在项目中通过analyze发现react-dom大小不理想，尝试将其与react作为外部库引用，通过修改config.ts的externals和scripts配置。然而，umi.js的加载顺序导致错误，因为umi.js在react之前加载。作者搜索解决方案，发现旧方法不可用，最终在umi文档中找到headScripts参数来调整引入顺序，成功解决问题。

摘要由CSDN通过智能技术生成

通过analyze分析发现其实react-dom并不算小，有100多kb，所以就想把它单独引用。

于是就在config.ts增加

  externals: {
    'react': 'window.React',
    'react-dom': 'window.ReactDOM',
    // 'bizcharts': 'window.BizCharts',
    // '@antv/g2': 'G2',
  },
  scripts: [
    'https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js',
    'https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js',
    // 'https://g.alicdn.com/code/lib/bizcharts/4.1.19/BizCharts.min.js',
    // 'https://cdn.bootcdn.net/ajax/libs/antv-g2/4.2.8/g2.min.js',
  ],

结果发现，umi.js比react.js要先引入，umi找不到react肯定就失败了。