小记一篇 vuecli4项目 打包内存溢出问题

目录

  • 背景
    • [先解决内存溢出问题 让项目能够打包](#先解决内存溢出问题 让项目能够打包)
    • 打包优化
      • [公共第三方模块 提取出来 不走webpack 打包 , 改成 cdn 引入](#公共第三方模块 提取出来 不走webpack 打包 , 改成 cdn 引入)
      • [项目中使用 图片等 静态资源 全部走cdn](#项目中使用 图片等 静态资源 全部走cdn)
      • [使用thread-loader 开启多线程打包](#使用thread-loader 开启多线程打包)
  • 后序

背景

其他项目组有个项目迭代了3年,突然有一天 vuecli-4 webpack打包出现了 内存溢出!于是紧急协助处理了下。

先解决内存溢出问题 让项目能够打包

将打包内存 扩大到4G

javascript 复制代码
// package.json
//将内存 扩大到 4G 。
 "scripts": {
    "dev": "NODE_OPTIONS=\"--max-old-space-size=4096\" vue-cli-service serve --mode dev",
    "build:uat": "NODE_OPTIONS=\"--max-old-space-size=4096\" vue-cli-service build --mode uat",
    "build:pre": "NODE_OPTIONS=\"--max-old-space-size=4096\" vue-cli-service build --mode pre",
    "build:prd": "NODE_OPTIONS=\"--max-old-space-size=4096\" vue-cli-service build --mode prd",
    "eslint": "eslint --ext .js,.vue src && eslint \"src/**/*.{js,vue}\" --fix",
    "lint": "vue-cli-service lint --fix",
    "prepare": "husky install"
  }

node 在Linux服务器 单服务v8运行内存 默认最大为1.4G

打包优化

公共第三方模块 提取出来 不走webpack 打包 , 改成 cdn 引入

javascript 复制代码
// vue.config.js
 configureWebpack: (config) => {

 ...
 ...
  config.externals = {
      echarts: "echarts",
      vue: "Vue",
      axios: "axios",
      vuex: "Vuex",
      'vue-router' : 'VueRouter'
   }
}
javascript 复制代码
// index.html
<!--   性能优化:这几个包如果通过webpack打包出来体积太大了,影响首屏加载时间-->
<script src="https://xxxx.com/public/wlc/qywx/utils/echarts.min.js"></script>
<script src="https://xxxx.com/public/wlc/qywx/utils/vue.min.js" ></script>
<script src="https://xxxx.com/public/wlc/qywx/utils/axios.min.js" ></script>
<script src="https://xxxx.com/public/wlc/qywx/utils/vuex.min.js" ></script>
<script src="https://xxxx.com/public/wlc/qywx/utils/vue-router.min.js" ></script>

项目中使用 图片等 静态资源 全部走cdn

图片引用直接用cdn ,不走本地打包

使用thread-loader 开启多线程打包

thread-loader 与 vue-loader 和 babel-loader 结合使用以加速构建过程

javascript 复制代码
npm i -D thread-loader

// vue.config.js

chainWebpack(config) {
...
...

// 配置 thread-loader 与 vue-loader 结合
    config.module
    .rule('vue')
    .use('thread-loader')
    .loader('thread-loader')
    .options({
      // 为 thread-loader 设置参数,如线程数
      workers: 3,
      // 其他可能需要的选项,如缓存
      // workerParallelJobs: 50,
      // poolTimeout: 2000,
    }).end()
    .use('vue-loader')
      .loader('vue-loader')
      .end()
   

     // 配置 thread-loader 与 babel-loader 结合
     config.module
     .rule('js')
     .exclude.add(/node_modules/)
     .end()
     .use('thread-loader')
     .loader('thread-loader')
     .options({
       // 保持与 vue-loader 中 thread-loader 的选项一致
       workers: 3,
       // 其他可能需要的选项
       // ...
     }).end()
     .use('babel-loader')
       .loader('babel-loader')
       .end()
     
}

后序

项目重构成 vue3 多入口页面。多入口对比单入口 有个优势就是每个入口的打包 内存环境都是独立 ,重新计算的。

相关推荐
你的人类朋友15 分钟前
什么是断言?
前端·后端·安全
FIN66681 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4951 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1241 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树1 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66681 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER1 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰2 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木2 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
山海鲸可视化2 小时前
简单聊聊数据可视化大屏制作的前端设计与后端开发
前端·信息可视化·数字孪生·数据可视化·3d模型·三维渲染