vue项目打包数百M解决

vue项目打包数百M解决

项目打包之后500多M,每次打包/部署服务器都崩,分析之后,发现是引用不规范导致的,一些经常用到的组件,当时的开发人员没有全局引入,而是各个vue/js中引入的…

解决方法

• 关闭map

这个项目之前就关了…依然这么大(关闭map项目可以减少3/5,也就是说,没关map会超过1G…)

• 找到重复引入的组件,在main.js中引入

由于只是全局引入一下,其他地方的代码没变,也就不会有兼容问题
这个方法让我的项目从562M减少到了正常的61M(其中有20M是图片,js文件夹33.9M);之后可以引入CDN继续优化项目

步骤

关闭map

• \config\index.js的module.exports.build的productionSourceMap设置为false,打包的时候就不会生成map文件,打包速度也会提升很多;

处理重复引入组件

使用 webpack-bundle-analyzer 进行分析(配置方法就不写了)

打包之后,要过一段时间才会出分析结果

• 可以看到,项目中cesium 一直重复打包;
• 在main.js中引入

import * as Cesium from 'cesium/Cesium'
#不知道怎么引的话,全局搜 cesium ,看看其他地方是怎么引的

---

• 此时再次打包,项目就只有160M了,再次弹出的分析页面中,有几个组件不大,但是几乎所有的js中都出现了,也一并引入

import * as turf from '@turf/turf'
import L from "leaflet";
import JsZip from 'jszip'

• 再次打包,项目只有96M,此时最大的是src/js中的文件夹,里面自定义的js文件,在项目中一直重复引入,
  

# 引入ser/js文件夹,webpage直接写 ./src/js 失败了,就换了@,@代表src文件夹
const modulesFiles = require.context("@/js", true, /\.js$/);

• 此时项目就只有61.6M了
  
  

完成!!!

项目还可以继续优化,比如vue,element-ui等组件可以改为CDN资源:

---

• 一个CDN库:https://www.bootcdn.cn/

• 一篇继续优化的博客:https://blog.csdn.net/weixin_44253490/article/details/108767667

• 一篇压缩vue的博客:https://www.cnblogs.com/ziyue7575/p/62c0f4474c2f03d21af8b643a54ab390.html