安裝分析工具

首先安裝webpack-bundle-analyzer

yarn add -D webpack-bundle-analyzer

在工程的打包文件中加上plugin， 筆者的工程使用的craco， 因此在
加入如下代碼

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require("path");


module.exports = {
...
  webpack: {
    plugins: [
        new BundleAnalyzerPlugin({
            analyzerMode: 'server',
            analyzerHost: '127.0.0.1',
            analyzerPort: 8888,
            openAnalyzer: true, // 構(gòu)建完打開瀏覽器
            reportFilename: path.resolve(__dirname, `analyzer/index.html`),
        }),
    ],
  }
}

最后運行build后， 可以在本地的8888看到打包配置；

減少最終打包的大小

打包后， 發(fā)現(xiàn)一個less文件比較大， 結(jié)果是全局引入了antdesign的less文件導(dǎo)致的， 去掉整體引入， 會減少不少大小

然后， 發(fā)現(xiàn)moment比較大， 按網(wǎng)上的教程加入

  webpack: {
    plugins: [
      ...
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

大小沒變化， 徹底刪除

new webpack.IgnorePlugin(/moment$/),

要報錯， 暫時不管了

然后按照優(yōu)雅的代碼的原則， 在路由上， 把相關(guān)性低的頁面分開

const BasicPage = React.lazy(() => import("./pages/basic"));
// 外層需要搭配
<Suspense fallback={<div>Error</div>}>
</Suspense>