小记一篇 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 多入口页面。多入口对比单入口 有个优势就是每个入口的打包 内存环境都是独立 ,重新计算的。

相关推荐
编程猪猪侠26 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞30 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架