vue项目打包后文件过大

Kuno_ 2022-05-28 我要评论

为什么打包后文件过大？

移动app项目，使用vue-cli脚手架搭建，UI主要运用的是Muse-UI，开发过程中为满足需求，混入Element-UI部分组件，加之团队开发，前端不止一人参与，在没有统一规范约束的情况下，编码风格和方式都很迥异和…混乱，以致依赖过多，打包时webpack把所有的库都打包在一起，所以vendor.js文件和app.js文件很大，最后出现进入首个页面时会长时间的白屏，影响用户体验。

打包文件过大

在这里插入图片描述

如何快速解决

在优化复杂性项目时，只增不减可大大减少风险，bug可控，既保证项目正常运行同时减少不必要的工作量

1.路由懒加载【使用es6提案的import()方式】

未修改前路由引用方式

这里推荐使用es提案的import()方式是因为未修改前路由定义时也时用import的方式引用，若使用vue路由懒加载组件，修改的地方较多，不够快捷。

修改后的路由引用方式

修改后引用方式如图，即：

把import login from '@/views/login/login'修改为

const login = () => import('@/views/login/login')

路由初始化

其他路由配置不需要变动。

2.CDN引入

cdn引入

在 index.html 页面使用cdn加载依赖

 <link rel="stylesheet" href="https://unpkg.com/muse-ui/dist/muse-ui.css" rel="external nofollow" >
 <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
 <link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css" rel="external nofollow" >
 <link href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel="external nofollow"  rel="stylesheet">
 <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
 <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.js"></script>
 <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script src="https://unpkg.com/muse-ui/dist/muse-ui.js"></script>
 <script src="https://cdn.bootcss.com/exif-js/2.3.0/exif.js"></script>

添加 webpack.base.conf.js 配置

  externals: {
    'element-ui': 'ELEMENT',
    'vue': 'Vue',
    'querystring':'Qs',
    'vue-router': 'VueRouter',
    'MuseUI': 'MuseUI',
    'axios':'axios',
    'jquery': "jQuery",
    "EXIF":'EXIF',
    'echarts': 'echarts'
  },

main.js