快速解决Vue项目打包后文件过大问题

快速解决Vue项目打包后文件过大问题

  • 为什么打包后文件过大?
  • 如何快速解决
    • 一、路由懒加载【使用es6提案的import()方式】
    • 二、CDN引入

为什么打包后文件过大?

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

如何快速解决

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

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

快速解决Vue项目打包后文件过大问题_第3张图片
这里推荐使用es提案的import()方式是因为未修改前路由定义时也时用import的方式引用,若使用vue路由懒加载组件,修改的地方较多,不够快捷。
快速解决Vue项目打包后文件过大问题_第4张图片
修改后引用方式如图,即:
import login from '@/views/login/login'修改为

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

快速解决Vue项目打包后文件过大问题_第5张图片
其他路由配置不需要变动。

二、CDN引入

快速解决Vue项目打包后文件过大问题_第6张图片
在 index.html 页面 使用cdn加载依赖

 
 
 
 
 
 
 
 
 
 
 
 

添加 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'
  },

快速解决Vue项目打包后文件过大问题_第7张图片
尽可能把在main.js中的引用的依赖用cdn在index.html中引用
在开源项目 CDN 加速服务中可以查找到大部分开源库的cdn

这里是不建议在优化已成型项目时直接把main.js中依赖引用部分删掉,如果删掉需要在公共JS中重新引入或者在所需依赖页面中导入,还要注意导入时定义的名称需要跟项目中已存在的依赖引用变量名一致,这将加大自己的工作量,新搭建项目或者想深入学习让代码更纯净者可以去度娘找资料研究哦

这样优化就告一段落了,打包后文件大小如下:
快速解决Vue项目打包后文件过大问题_第8张图片
vendor.***文件大小从1.98M减少至342K
app.***文件大小从573K减少至53.3K

页面加载速度:
快速解决Vue项目打包后文件过大问题_第9张图片
进入首个页面时长从平均13.6S减少至平均1.12S,近乎秒进。

最后对项目使用的图片素材进行压缩处理,修改config/index.js productionSourceMap: false 去除打包时生产.map文件,加快打包速度

以上是我在处理Vue项目打包后文件过大这个问题时的解决方法,希望能帮到你们。

你可能感兴趣的:(Vue专栏,Vue,打包文件过大,vendor,app,vue打包)