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

最新推荐文章于 2024-06-25 13:44:33 发布

纷飞丿

最新推荐文章于 2024-06-25 13:44:33 发布

阅读量3k

点赞数 3

分类专栏： vue杂谈文章标签：前端 vue 性能优化

本文链接：https://blog.csdn.net/f18855666661/article/details/123477974

版权

vue杂谈专栏收录该内容

3 篇文章 1 订阅

订阅专栏

最近在做 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

纷飞丿

关注

3
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
Vue 首屏加载优化（dist 打包文件从 5M+ 缩减到 324kb）

最近在做 Vue 项目的首屏优化，效果不错，在这里将经验分享给大家，总的优化措施是以下四点。优化方式1：将项目中用到的图片移动到百度云文件存储优化方式2：使用路由懒加载优化方式3：关闭 sourceMap 文件的生成优化方式4：将 vue、vue-router、vuex、axios、element-ui 改成 cdn 引入优化思路：将非必要打包的文件都移出去，最大化减小 dist 文件夹的体积，这样即使在服务器带宽不大的情况下，也能保证浏览器快速从服务器获取代码资源，而其他那些被移出去的文
复制链接

扫一扫

专栏目录