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

目录

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

背景

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

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

将打包内存 扩大到4G

// 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 引入

// vue.config.js
 configureWebpack: (config) => {

 ...
 ...
  config.externals = {
      echarts: "echarts",
      vue: "Vue",
      axios: "axios",
      vuex: "Vuex",
      'vue-router' : 'VueRouter'
   }
}

// 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 结合使用以加速构建过程

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