基于create react app的web页面优化大小的过程

安装分析工具

首先安装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, // 构建完打开浏览器
            reportFilename: path.resolve(__dirname, `analyzer/index.html`),
        }),
    ],
  }
}

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

减少最终打包的大小

打包后， 发现一个less文件比较大， 结果是全局引入了antdesign的less文件导致的， 去掉整体引入， 会减少不少大小

然后， 发现moment比较大， 按网上的教程加入

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

大小没变化， 彻底删除

new webpack.IgnorePlugin(/moment$/),

要报错， 暂时不管了

然后按照优雅的代码的原则， 在路由上， 把相关性低的页面分开

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