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资源:

posted @ 2020-09-25 09:28  紫月java  阅读(618)  评论(0)  编辑  收藏  举报