执笔看墨花开💜千千 执笔看墨花开💜千千
首页
  • JavaScript
  • Vue
  • React
  • HTML
  • CSS
  • 算法
  • 工具教程
  • 面试题清单
  • 大前端
  • HTML
  • CSS
  • JS
  • Vue
  • React
  • 零碎
  • 杂言碎语
  • 前端
  • 工具
  • 设计 & CSS
  • 社区 & 平台 & 博客
  • 网站
  • 推荐库
  • 值得一读
  • 分类
  • 标签
  • 归档
  • 心情杂货
  • 友情链接
  • 关于
GitHub (opens new window)

执笔看墨花开

顺其自然
首页
  • JavaScript
  • Vue
  • React
  • HTML
  • CSS
  • 算法
  • 工具教程
  • 面试题清单
  • 大前端
  • HTML
  • CSS
  • JS
  • Vue
  • React
  • 零碎
  • 杂言碎语
  • 前端
  • 工具
  • 设计 & CSS
  • 社区 & 平台 & 博客
  • 网站
  • 推荐库
  • 值得一读
  • 分类
  • 标签
  • 归档
  • 心情杂货
  • 友情链接
  • 关于
GitHub (opens new window)
  • JS文章

  • Vue文章

  • 跨端开发

  • React文章

  • 杂文

    • Webstorm排查插件问题
    • 为什么前端监控要用GIF打点
    • Bilibili短链生成器
    • Typora Bilibili图床插件
    • 防盗链那些事之referer
    • 获取B站SESSDATA
    • serverless+webpack解决node_modules空间大的问题
      • SPA单页应用直接使用百度统计
      • 先concat再去重引发的性能问题
      • 利用引用与时间戳解决一次性能问题
      • 批量新建工作项界面卡顿
      • 大用户数量加载慢分析
    • CSS

    • 前端
    • 杂文
    执笔看墨花开
    2021-05-19

    serverless+webpack解决node_modules空间大的问题

    # 背景

    想做一个手机浏览器插件,双击收藏好看的图片。用serverless做后端,leancloud做数据库。在部署serverless时发现,默认是要上传node_modules的,那也太夸张了吧。我随便装几个依赖,就70M了,这不行。于是想到了用webpack打包来实现,说干就干。

    # 主要坑

    # target

    target需要设置为node,小坑

    # libraryTarget

    开始没设置这个属性,然后打包部署之后,请求接口一直提示超时

    {"errorCode":-1,"errorMessage":"Invoking task timed out after 10 seconds","requestId":"ddaa2df566de8e2540272e360b06329c","statusCode":433}
    
    1

    然后提交工单,也没啥用,还让我把node_modules全部传上去,那也太大了,不可能滴。

    然后开始去webpack官网看配置,最后找到了他

    libraryTarget: 'commonjs2'

    **原因:**之前的打包方式没有module.exports=__webpack_exports__这句,导致serverless那边无法调用服务,改成commonjs2就有了

    # 开始

    安装webpack依赖

    "webpack": "^5.11.1",
    "webpack-cli": "^4.2.0"
    
    1
    2

    配置webpack.config.js

    const path = require('path');
    
    module.exports = {
      entry: './app.js', // 单入口
      mode: "production",
      output: {
        filename: 'pro.js',
        path: path.resolve(__dirname,'dist'),
        libraryTarget: 'commonjs2', // 这是最关键的,后面讲他的坑
      },
      target: 'node' // 这是最关键的
    };
    
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    增加启动脚本

    "scripts": {
        "start": "node ./bin/www",
        "build": "webpack --progress",
        "deploy": "npm run build && sls deploy"
      },
    
    1
    2
    3
    4
    5

    打包之后,只有1.3M, 部署之后,正常运行,完美

    编辑 (opens new window)
    上次更新: 2021/06/23, 11:58:10
    获取B站SESSDATA
    SPA单页应用直接使用百度统计

    ← 获取B站SESSDATA SPA单页应用直接使用百度统计→

    最近更新
    01
    Vue2
    08-26
    02
    JS编程题
    08-26
    03
    前言
    08-26
    更多文章>
    Theme by Vdoing

    © 2021-2021 执笔看墨花开

    粤ICP备2021110554号
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式
    ×