网络知识 娱乐 Vue 首屏加载优化（dist 打包文件从 5M+ 缩减到 324kb）

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

发布: 2023年2月14日 10:17:50

最近在做 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 引入，内容如下。



  
    
    
    
    
    xxxx
  
  
    
      We're sorry but  doesn't work properly without JavaScript enabled. Please enable it to continue.

第三部：完全移除 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

相关文章