背景

其他项目组有个项目迭代了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.jsconfigureWebpack: (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.jschainWebpack(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 多入口页面。多入口对比单入口 有个优势就是每个入口的打包 内存环境都是独立 ，重新计算的。