Vue项目打包文件过大（优化）

问题
Vue项目打包文件过大，项目加载慢，前端可以做哪些优化？

分析
其实，这是项目的性能优化，一般在项目开始开发之前就应该考虑，但在实际开发中，开发之前会被忽略。

解决方案如下

一、懒加载

什么叫懒加载？在需要的时候进行加载，随载随用。
常见的有：路由、图片等。
例子：
官方路由懒加载

{path: "/timeAxis",name: "timeAxis",component: () =>import ('@/views/xxx'),
}

二、按需加载

什么叫按需加载？根据需要去加载资源。
常见的有：UI库等。

三、不生成.map文件

配置里productionSourceMap设置成为false，能差不多减少一半的体积。

四、通过cdn方式引入

将不怎么会改动的第三方包通过<script>标签引入，并且在webpack.base.config.js中的externals添加包名，表示不打包的文件，去除在main.js中的引用。（这个方法可以解决打包后app.js、vendor.js文件过大的问题。）

externals: {'vue': 'Vue','vue-router': 'VueRouter','axios': 'axios',
},

五、图片压缩

可利用一些网站对大体积图片进行压缩，例如：tinypng

第一、二点最好是在项目开始的时候就约定好，不然后期修改起来会很麻烦，第三、四点是配置方面的，第五点是静态资源的。应该还有其他解决方案，暂时只整理出这些。

Vue项目打包文件过大（优化）相关推荐

vue项目打包文件增加hash值
vue项目打包文件增加hash值 vue-cli2项目修改vue项目根目录下的 build/webpack.prod.conf.js文件 js文件: output: {path: config.bu ...
maven打包文件过大优化
很多公司在使用maven私服的时候为了优化磁盘空间,去除不必要的文件.如果是单pom项目中在配置中引入 <properties><maven.deploy.skip>true& ...
vue 计算文件hash值_vue项目打包文件增加hash值
vue项目打包文件增加hash值 vue-cli2项目修改vue项目根目录下的 build/webpack.prod.conf.js文件 js文件: output: { path: config.b ...
vue打包生成的js文件过大优化
vue打包生成的js文件过大优化 1.组件按需加载 2.去掉生成map文件 3.cdn引入 4.路由懒加载 5.代码压缩 6.最后项目打包之后js文件太大问题问题描述 1.使用cdn引入不怎么改变 ...
vue项目打包优化策略
vue项目打包优化策略使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载这是首先可以 ...
快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题为什么打包后文件过大? 如何快速解决一.路由懒加载[使用es6提案的import()方式] 二.CDN引入为什么打包后文件过大? 移动app项目,使用vue- ...
记一次vue项目打包优化
目录前言一.优化静态资源二.vue项目打包体积优化 1.路由懒加载 2.抽离第三方js库 3.小结三.代码优化 1.减少页面的重排和重绘 2.多设置key值四.服务器优化 1.nginx服务 ...
VUE引入Echarts 打包文件过大——解决方法1：按需引入
在vue中引入echarts文件 ,打包太大怎么办? 可以按需引入在vue项目中加入了echarts图表.在进行项目打包时发现,因为引入了全局的echarts,导致打包文件太大,在查找了一系列的文章 ...
Vue项目打包后js文件压缩
前言这段时间因为免费试用了https://free.aliyun.com/一台阿里云的服务器,配置是 2核4G 2M, 因为带宽太低了,每次在第一次加载的时候太慢了,通过F12调试,发现主要是因为加 ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...