解决vue app.js/vender.js过大优化启动页
作者：张旭超
这篇文章主要为大家介绍了解决vue app.js/vender.js过大优化启动页过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
正文
只需要在运行打包命令的后面加上"--report"，完成以后就会跳转到127.0.0.1:8888如上界面，然后根据界面分析修改。
npm run build --report
1、路由懒加载
import Home from '@/components/Home'
修改为
const Home = () => import('@/components/Home')2、开启gzip功能
打开/config/index.js文件
productionGzip: true,
安装
npm install --save-dev compression-webpack-plugin
如果报错
npm install --save-dev compression-webpack-plugin@1.1.11
后台也需要配置，我们后台是nginx
nginx.conf配置文件中修改
http {
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 8;
gzip_buffers 16 8k;
gzip_min_length 100;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;
}重启
systemctl reload nginx.service systemctl restart nginx.service
3、插件模块组件按需加载
element-ui，iView等模块用的哪个模块的时候导入
这里遇到vue-echarts插件问题，没有做路由模块懒加载的时候，只需要如下
import Echarts from 'vue-echarts'
Vue.components('chart', Echarts)但是做了模块懒加载以后，就会报错，说是没有引入统计图的模块
作如下改动
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/map/js/china'
...
const ECharts = () => import('vue-echarts')
Vue.component('chart', ECharts)4、使用CDN或者static静态导入
这里使用www.jsdelivr.com CDN网站，速度快 具体说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css" rel="external nofollow" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iview@3.5.4/dist/styles/iview.css" rel="external nofollow" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.core.css" rel="external nofollow" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="external nofollow" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.bubble.css" rel="external nofollow" >
<link rel="stylesheet" href="//at.alicdn.com/t/font_946160_ugxj3soemml.css" rel="external nofollow" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.1/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/iview@3.5.4/dist/iview.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/locale/zh-cn.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-socket.io@3.0.7/dist/vue-socketio.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/map/js/china.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@1.1.3/dist/echarts-wordcloud.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>
<title>帮瀛</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
以上就是解决vue app.js/vender.js过大优化启动页的详细内容，更多关于vue app.js/vender.js的资料请关注脚本之家其它相关文章！