最近在做 Vue 项目的首屏优化，效果不错，在这里将经验分享给大家，总的优化措施是以下四点。

优化方式1：将项目中用到的图片移动到百度云文件存储
优化方式2：使用路由懒加载
优化方式3：关闭 sourceMap 文件的生成
优化方式4：将 vue、vue-router、vuex、axios、element-ui 改成 cdn 引入

优化思路：将非必要打包的文件都移出去，最大化减小 dist 文件夹的体积，这样即使在服务器带宽不大的情况下，也能保证浏览器快速从服务器获取代码资源，而其他那些被移出去的文件不会占服务器的带宽，因而可以保证极快的首屏加载。

1，优化方式1：将项目中用到的图片移动到百度云文件存储

第一条没什么说的，将项目中的图片资源移动到文件服务器，然后将项目中的图片地址改成 URL 链接即可。

2，优化方式2：使用路由懒加载

路由懒加载的官方文档点击这里。

3，优化方式3：关闭 sourceMap 文件的生成

在项目根目录下新建 vue.config.js 文件，文件内容如下：

module.exports = {productionSourceMap: false
}

4，优化方式4：将 vue、vue-router、vuex、axios、element-ui 改成 cdn 引入

这一条是大招，能极大的减少 dist 打包文件的体积，配置步骤如下。

第一步：新增 vue.config.js 配置，内容如下。

module.exports = {productionSourceMap: false,configureWebpack: {externals: {'vue': 'Vue','vue-router': 'VueRouter','vuex': 'Vuex','axios': 'axios','element-ui': 'ELEMENT',}}
}

第二部：在 public/index.html 中新增第三方库的 CDN 引入，内容如下。

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.bootcss.com/element-ui/2.15.6/theme-chalk/index.css" rel="stylesheet"><title>xxxx</title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script><script src="https://cdn.bootcss.com/vuex/3.6.0/vuex.min.js"></script><script src="https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js"></script><script src="https://cdn.bootcss.com/axios/0.26.0/axios.min.js"></script><script src="https://cdn.bootcss.com/element-ui/2.15.6/index.js"></script><!-- built files will be auto injected --></body>
</html>

第三部：完全移除 src 代码文件中第三方库的 import 引入，代码如下。

// src/main.js
import App from './App.vue'
import router from './router'
import store from './store'Vue.config.productionTip = false// 引入使用 axios
axios.defaults.baseURL = 'http://jinniu.shopflyer-df.cn'
Vue.prototype.$http = axios// 引入全局 css
import './assets/css/global.css'new Vue({router,store,render: h => h(App)
}).$mount('#app')

// src/store/index.js
export default new Vuex.Store({state: {},mutations: {},actions: {},modules: {}
})

// src/router/index.js
const Home = () => import('../views/Home')const routes = [{path: '/',name: 'Home',component: Home},......
]const router = new VueRouter({routes
})export default router

Vue 首屏加载优化（dist 打包文件从 5M+ 缩减到 324kb）相关推荐

记前端项目首屏加载优化（网络篇）
继之前的一篇<记前端项目首屏加载优化(打包篇)>之后,这次来讲一讲我的首屏加载在网络方面的优化?. 写在前面资源加载是一个网站的展示在用户浏览器的必经之路,资源的请求次数和响应时间决定了 ...
vue spa php,在Vue中有关SPA首屏加载优化（详细教程）
本篇文章主要介绍了浅谈Vue SPA 首屏加载优化实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧写在前面本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一 ...
Vue首屏加载白屏问题及解决方案
Vue首屏加载白屏问题及解决方案首先说一下首页加载为什么会白屏? 先说下 SPA 单页面的加载过程首先就是 html ,也就是 FP 阶段 FP(全称"First Paint" ...
单页应用的优缺点，单页应用首屏加载优化、小程序首次启动速度优化
单页应用的优缺点单页应用,简称(Single Page Application)是指整个应用只一个HTML页面,所有的功能和交互都在这个页面完成,利用JavaScript动态改变HTML内容. 优点 ...
vue首屏加载速度慢_Vue首屏加载速度优化如何提升80%？本文详解
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...
VUE 首屏加载时间优化
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...
vue项目首屏加载优化
1.将第三方资源使用cdn引入将项目中用到的一些第三方库通过cdn的方式引入的话,在打包的时候就不需要对第三方库进行打包,自然就减小了包的大小,首屏加载的时候所加载的内容也就减少了,加载时间就少了. ...
Vue首屏加载速度优化，提升80%以上
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...
Vue首屏加载速度优化，我用这几个技巧提升80%以上
作者:谁动了我的橘子原文链接:https://juejin.im/post/5edf5b22e51d4578975a7024 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进v ...

Vue 首屏加载优化（dist 打包文件从 5M+ 缩减到 324kb）

1，优化方式1：将项目中用到的图片移动到百度云文件存储

2，优化方式2：使用路由懒加载

3，优化方式3：关闭 sourceMap 文件的生成

4，优化方式4：将 vue、vue-router、vuex、axios、element-ui 改成 cdn 引入

Vue 首屏加载优化（dist 打包文件从 5M+ 缩减到 324kb）相关推荐

最新文章

热门文章