vue项目打包数百M解决
项目打包之后500多M,每次打包/部署服务器都崩,分析之后,发现是引用不规范导致的,一些经常用到的组件,当时的开发人员没有全局引入,而是各个vue/js中引入的...
解决方法
- 关闭map
这个项目之前就关了...依然这么大(关闭map项目可以减少3/5,也就是说,没关map会超过1G...)
- 找到重复引入的组件,在
main.js中引入
由于只是全局引入一下,其他地方的代码没变,也就不会有兼容问题
这个方法让我的项目从562M减少到了正常的61M(其中有20M是图片,js文件夹33.9M);之后可以引入CDN继续优化项目
步骤
关闭map
configindex.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资源: