vue性能优化

最新推荐文章于 2024-03-31 17:26:14 发布

zhcinit0

最新推荐文章于 2024-03-31 17:26:14 发布

阅读量244

点赞数

分类专栏：加载优化 vue 文章标签：前端 vue.js 内存优化

本文链接：https://blog.csdn.net/zhcinit0/article/details/106355410

版权

vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

加载优化

1 篇文章 0 订阅

订阅专栏

背景 vue cli3.0 + element-ui 管理系统部署上线后首次访问速度非常慢

将写好的vue项目部署到服务器上后首次加载，速度感人，这里记录下优化的方案

1、查找原因

在network中看到页面加载中有一个打包文件请求的时间非常长
在这里插入图片描述资源请求耗时：从图里可以明显看到个别js文件请求耗时高达7秒

2、选择解决方案

优化加载速度的方法很多，比如优化代码、优化请求接口，或者采用压缩打包文件（需要配置nginx，优化效果也比较明显）。
本文选择详细描述的是 cdn引入文件，减少webpack打包文件的体积，从而优化加载速度

3、话不多说直接上第一步

vue项目下的index.html文件 cdn引入需要用到的包引入地址推荐使用：cnd地址
可以选择对应版本

<!DOCTYPE html>
<html lang="en">
  <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.bootcdn.net/ajax/libs/element-ui/2.13.1/theme-chalk/index.css" rel="stylesheet">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></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>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.1.3/vuex.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts-en.common.js"></script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

第二步配置vue.config.js

这是我的配置优化的关键点是在配置里加上 externals的配置 externals具体作用可以去webpack官网看

const path = require('path');
module.exports = {
    //部署应用包时的基本 URL ,用法和 webpack 本身的 output.publicPath 一致
    // publicPath:process.env.NODE_ENV === 'production'?'/':'./'
    publicPath:'./',
    //输出文件目录
    outputDir:'dist',
    //eslint-loader 是否在保存的时候检查
    lintOnSave:false,
    //是否使用包含运行时编译的 Vue 构建版本
    runtimeCompiler:true,
    //生产环境是否生成 sourceMap 文件
    productionSourceMap:false,
    // webpack-dev-server 相关配置
    devServer:{
        open:true,
        host:'localhost',
        port:9003,
        https:false,
    },
    configureWebpack:{ 
        resolve: {
            extensions: ['.js', '.json', '.vue', '.scss', '.css'],
            alias: {},
          },
        **externals: {
            'vue': 'Vue',
            'vuex': 'Vuex',
            'vue-router': 'VueRouter',
            'ElementUI': 'ELEMENT',
            'echarts': 'echarts',
            'Axios':'axios'
          },**
    },
    
}

第三步修改引入文件的方式

例如 vuex

// import Vue from 'vue'			//删除
import Vuex from 'vuex'

// Vue.use(Vuex)				//删除

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

vue-router

// import Vue from 'vue'	//删除
import VueRouter from 'vue-router'

// Vue.use(VueRouter)		//删除

最后修改main.js文件的引入

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
//import ELEMENT from 'element-ui'		//element 做成按需加载 具体上篇博客有介绍
//Vue.use(ELEMENT)


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router: router,
  store: store,
  render: h => h(App)
})

本章完