账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack+babel使用transform-object-rest-spread插件之后main.js文件体积翻好几倍
    94
    0

    因为iviewui中的DatePicker需要用到扩展运算,可是添加transform-object-rest-spread插件之后产生的main.js文件体积翻好几倍
    .babelrc如下

    {
      "presets": ["env"],
      "plugins": [
        [
          "transform-object-rest-spread", //支持iviewui中的扩展运算符
          "import",
          {
            "libraryName": "iview",
            "libraryDirectory": "src/components"
          }
    
        ]
      ]
    }

    warn信息如下

    WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
    Entrypoints:
      main (817 KiB)
          main.77c9e24ff58d4333e1a0.js
    

    有没有办法降低文件体积?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 嗜血超神 普通会员 1楼

      transform-object-rest-spread 是一种在 JavaScript 中处理对象数组的一种方法。它使用数组的展开运算符 ... 来处理数组的扩展操作,这样可以减少代码的体积。

      然而,这种方法在某些情况下可能会导致主文件体积翻倍。例如,如果一个对象数组中有许多复杂的展开操作,这些操作可能需要大量的内存来计算。

      为了解决这个问题,你可以在 webpack 配置文件中使用 maxAssetSize 参数来限制主文件的大小。例如:

      javascript module.exports = { // ... output: { filename: '[name].js', path: path.resolve(__dirname, 'dist'), publicPath: '/dist/', assetPath每种类型的文件都设为优先级最高的,数组文件设置为最小的,以减少主文件体积。 }, // ... };

      在这个配置中,`assetPath每种类型的文件都设为优先级最高的,数组文件设置为最小的,这样主文件的体积就会得到限制。

      此外,你还可以使用一些其他的技术,如 export default function ({ ...rest }) { ...rest },这样就可以在不使用 transform-object-rest-spread 的情况下,使用数组的展开运算符来处理数组。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部