webpack externalsを使って@material-ui/coreを外部ライブラリとして読み込む

Question

bundleのサイズを減らすために大きいサイズのモジュールをbundleには含めずに外部ファイルとして読み込みたいと考えています。
webpack.config.jsのexternalsの部分を以下のように設定して、BundleAnalyzerPluginで解析したところ、material-uiのみ除外されませんでした。（このあたりを参考にしましたがうまくexternalsが機能していませんでした。React + Firebase + MaterialUI --(webpack + CDN)--> 神）

@material-ui/core部分の表記方法をご教授いただけると幸いです。

webpack.config.js

...

externals: [{
        'react': 'React',
        'react-dom': 'ReactDOM',
        'moment': 'moment',
        '@material-ui/core': 'MaterialUI',
    },],
...

Answer 1

公式Githubを参考にCDNを利用しました。
https://github.com/mui-org/material-ui/blob/next/examples/cdn/index.html

<!-- 以下を記載 -->
<script src="https://unpkg.com/@material-ui/core@4.11.2/umd/material-ui.production.min.js" crossorigin="anonymous"></script>

// import Button from '@material-ui/core/Button'
const {
    Button
} = window.MaterialUI

Comments

[T_T]

window.MaterialUIを使わずに通常のインポート方法でCDNを利用する方法がありました。
https://www.tate-blog.com/2021/08/31/reactjs-webpack-externals-settings/