前端打包体积优化

概况

• A 项目中引入了公共包 lib B
• 由于业务的特殊性， B 包中含有大量的业务逻辑代码
• A 打包后， B 作为公共包被打入了 vendors 模块中了
• vendors 目前大小有 2.4M

觉得 vendors 有点大， 需要优化下体积大小

分析

• 利用分析工具去看看到底是哪些包比较大， 由于构建是用 webpack 构建的， 可以使用 Analyzer 进行分析
• 使用 Analyzer 进行构建后， 分析得出 B 包里东西较多， 也比较大
• 那么就需要对 B 包进行体积优化呢， 具体怎么优化呢？
• 哪些体积比较大

解决

• 利用 peerDependencies 不打包部分包

 "peerDependencies": {
        "@pendant/monkit": ">=0.11.1",
        "@pendant/monkit-icons": ">=0.4.0",
        "antd": ">=4.19.2",
        "lodash": ">=4.17.15",
        "moment": ">=2.29.3",
        "react": ">=17.0.2",
        "react-dom": ">=17.0.0"
    },