前端项目打包优化

2023-12-25 08:51:22

前言

一个umijs项目,打包后发现体积过大,想优化, 看到各种博客上的优化手段是基于webpack的,于是我花了几天把项目转成webpack5的, 优化打包后比原来还大.... 最终还是在原来的umijs基础上进行了优化.

打包分析

umi项目在package.json加一个脚本语句 "analyze": "cross-env ANALYZE=1 umi build", 执行yarn analyze 即可在ANALYZE server上得到依赖包分析图

 "scripts": {
    "start": "cross-env UMI_ENV=dev umi dev",
    "build": "cross-env UMI_ENV=prod umi build",
    "analyze": "cross-env ANALYZE=1 umi build",
    "postinstall": "umi generate tmp",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage"
  },

webpack需要安装 webpack-bundle-analyzer 插件并在配置文件中配置 new BundleAnalyzerPlugin().

针对性优化(antd echart lodash)