Vue项目优化

最新推荐文章于 2023-02-06 17:33:36 发布
最新推荐文章于 2023-02-06 17:33:36 发布
阅读量338 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28988969/article/details/106317450
版权

通过nprogress添加进度条效果

安装nprogress插件：依赖 》安装依赖 》运行依赖，搜索nprogress，安装
在这里插入图片描述
配置progress

  1. 在axios.js中引入NProgress的JS和CSS
  2. 在axios的request拦截器中，显示进度条NProgress.start()
  3. 在axios的response拦截器中，隐藏进度条NProgress.done()
import Vue from 'vue'
// 导入axios
import axios from 'axios'

// 导入 NProgress 包对应的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 设置请求根路径
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL

// axios拦截器
// 在request拦截器中，展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
  NProgress.start()
  // 在最后必须return config
  return config
})

// 在response拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})

// 挂载到vue
Vue.prototype.$http = axios

在项目发布阶段移除所有的console

安装插件：依赖 》安装依赖 》开发依赖，搜索babel-plugin-transform-remove-console，安装
在这里插入图片描述
在项目中配置，找到项目根目录下babel.config.js文件

// 这是项目发布阶段需要用到的babel插件
const prodPlugins = []
// 如果是production模式，添加插件
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    // 发布的时候用到的插件数组
    // ... 代表展开运算符，表示把数组展开，放到另一个数组中
    ...prodPlugins
  ]
}

为开发模式与发布模式指定不同的打包入口

默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即main.js）

为了将项目的开发过程和发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：

  • 开发模式入口文件为src/main-dev.js
  • 发布模式入口文件为scr/main-prod.js

复制src目录下main.js，copy到src目录下，分别重命名为main-dev.js和main-prod.js
项目根目录下vue.config.js

// 如果有报错，检查一下是不是空格问题导致的
module.exports = {
  // 设置打包后输出的目录
  outputDir: '../static',
  // 设置打包后静态资源目录
  assetsDir: 'static',
  devServer: {
    // 设置自动打开浏览器
    open: true,
    // 端口号
    port: 9999
  },
  // 打包配置
  chainWebpack: config => {
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
    })
  }
}

通过externals加载外部CDN资源

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大问题

为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源，凡是声明在externals中的第三方依赖包，都不会被打包

  1. 项目根目录vue.config.js中配置
// 如果有报错，检查一下是不是空格问题导致的
module.exports = {
  // 设置打包后输出的目录
  outputDir: '../static',
  // 设置打包后静态资源目录
  assetsDir: 'static',
  devServer: {
    // 设置自动打开浏览器
    open: true,
    // 端口号
    port: 9999
  },
  // 打包配置
  chainWebpack: config => {
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')

      // 设置加载外部CDN资源，格式-外部资源名：自定义名称
      // eg：import NProgress from 'nprogress'    定义为nprogress: 'NProgress'
      config.set('externals', {
        vue: 'Vue',
        vuex: 'Vuex',
        // 有中划线，所以加了单引号
        'vue-router': 'VueRouter',
        // v-charts不知道为啥要反过来写
        VCharts: 'v-charts',
        echarts: 'echarts',
        axios: 'axios',
        nprogress: 'NProgress',
        moment: 'moment'
      })
    })
  }
}
  1. 在main-prod中删除外部引入的css
// nprogress的css
import 'nprogress/nprogress.css'
  1. public目录下index.html中，引入对应版本的css和js文件
<!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 rel="icon" href="<%= BASE_URL %>zhixing.png">
  <title>demo</title>

  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- css -->
  <link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link crossorigin="anonymous" integrity="sha384-+r5wKQwnEAr4Kd2LNn0Ny3mYYBqstQIKUCUAN3lclrC+vPH3Yh31S9csQL+c8j9J"
    href="https://lib.baomitu.com/v-charts/1.18.0/style.min.css" rel="stylesheet">

  <!-- js -->
  <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.1.3/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.25.3/moment.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.25.3/locale/zh-cn.min.js"></script>
  <script crossorigin="anonymous" integrity="sha384-qx5fdRnT7kg5q9TcjgvTUO8JfptIXUXXmMAZlr+kJ8qQoDJ3kLt50dDBfR3F1Lgl"
    src="https://lib.baomitu.com/v-charts/1.18.0/index.min.js"></script>

</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>
  <!-- built files will be auto injected -->
</body>

</html>
  1. 对应的依赖版本可以在根目录下package.json中查看
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "echarts": "^4.7.0",
    "element-ui": "^2.4.5",
    "moment": "^2.25.3",
    "nprogress": "^0.2.0",
    "v-charts": "^1.19.0",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6",
    "vuex": "^3.1.3"
  }

通过CDN优化ElementUI的打包

  1. 在main-prod.js中,注释掉element-ui按需加载的代码
// import './plugins/element.js'
  1. public目录下index.html中，引入对应版本的css和js文件
<!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 rel="icon" href="<%= BASE_URL %>zhixing.png">
  <title>demo</title>

  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- css -->
  <link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link crossorigin="anonymous" integrity="sha384-+r5wKQwnEAr4Kd2LNn0Ny3mYYBqstQIKUCUAN3lclrC+vPH3Yh31S9csQL+c8j9J"
    href="https://lib.baomitu.com/v-charts/1.18.0/style.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">

  <!-- js -->
  <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.1.3/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.25.3/moment.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.25.3/locale/zh-cn.min.js"></script>
  <script crossorigin="anonymous" integrity="sha384-qx5fdRnT7kg5q9TcjgvTUO8JfptIXUXXmMAZlr+kJ8qQoDJ3kLt50dDBfR3F1Lgl"
    src="https://lib.baomitu.com/v-charts/1.18.0/index.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>

</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>
  <!-- built files will be auto injected -->
</body>

</html>

首页内容定制

不同的打包环境下，首页内容可能会有所不同，我们可以通过插件的方式进行定制

  1. 根目录下vue.config.js
// 如果有报错，检查一下是不是空格问题导致的
module.exports = {
  // 设置打包后输出的目录
  outputDir: '../static',
  // 设置打包后静态资源目录
  assetsDir: 'static',
  devServer: {
    // 设置自动打开浏览器
    open: true,
    // 端口号
    port: 9999
  },
  // 打包配置
  chainWebpack: config => {
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')

      // 首页内容定制
      config.plugin('html').tap(args => {
        // 为args增加一个参数
        args[0].isProd = false
        return args
      })
    })
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')

      // 设置加载外部CDN资源，格式-外部资源名：自定义名称
      // eg：import NProgress from 'nprogress'    定义为nprogress: 'NProgress'
      config.set('externals', {
        vue: 'Vue',
        vuex: 'Vuex',
        // 有中划线，所以加了单引号
        'vue-router': 'VueRouter',
        // v-charts不知道为啥要反过来写
        VCharts: 'v-charts',
        echarts: 'echarts',
        axios: 'axios',
        nprogress: 'NProgress',
        moment: 'moment'
      })

      // 首页内容定制
      config.plugin('html').tap(args => {
        // 为args增加一个参数
        args[0].isProd = true
        return args
      })
    })
  }
}
  1. public目录下index.html
<!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 rel="icon" href="<%= BASE_URL %>zhixing.png">
  <!-- 首页内容定制 -->
  <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>demo</title>

  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <% if(htmlWebpackPlugin.options.isProd){ %>
  <!-- css -->
  <link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">
  <link crossorigin="anonymous" integrity="sha384-+r5wKQwnEAr4Kd2LNn0Ny3mYYBqstQIKUCUAN3lclrC+vPH3Yh31S9csQL+c8j9J"
    href="https://lib.baomitu.com/v-charts/1.18.0/style.min.css" rel="stylesheet">

  <!-- js -->
  <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.1.3/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.25.3/moment.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.25.3/locale/zh-cn.min.js"></script>
  <script crossorigin="anonymous" integrity="sha384-qx5fdRnT7kg5q9TcjgvTUO8JfptIXUXXmMAZlr+kJ8qQoDJ3kLt50dDBfR3F1Lgl"
    src="https://lib.baomitu.com/v-charts/1.18.0/index.min.js"></script>

  <% } %>

</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>
  <!-- built files will be auto injected -->
</body>

</html>

路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

路由懒加载：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

@babel/plugin-syntax-dynamic-import：https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/

  1. 依赖 》安装依赖 》开发依赖，搜索@babel/plugin-syntax-dynamic-impoort，安装
  2. 根目录下babel.config.js，配置路由懒加载插件
// 这是项目发布阶段需要用到的babel插件
const prodPlugins = []
// 如果是production模式，添加插件
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    // 发布的时候用到的插件数组
    // ... 代表展开运算符，表示把数组展开，放到另一个数组中
    ...prodPlugins,
    // 路由懒加载
    '@babel/plugin-syntax-dynamic-import'
  ]
}
  1. src目录下，router目录下index.js文件，修改路由
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入登录组件
const Login = () => import('../components/Login.vue')

// webpackChunkName表示块名称，Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中
// const Login = () => import(/* webpackChunkName: "login" */ '../components/Login.vue')

Vue.use(VueRouter)

const routes = [
  // 根路径重定向到登录
  {
    path: '/',
    redirect: '/login'
  },
  // 登录
  {
    path: '/login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

export default router
写写代码AAA
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈 Vue 项目优化的方法
08-28
浅谈 Vue 项目优化的方法 本文旨在介绍 Vue 项目优化的方法，涵盖基础优化、模板优化、样式优化和脚本优化等方面的知识点。 基础优化是任何 Web 项目都需要做的，是问题的根源。我们需要关心 HTML、CSS、JS 三个...
vue-cli 单文件组件
yijiupingfan0914的博客
08-04 1065
原文地址：https://www.jianshu.com/p/a919598f2c17 在 Vue 项目初始化完成之后（vue-cli），来看一看该环境中 HTML, CSS, JS 三者的关系 本文将按照以下顺序进行查看： index.html（首页） src/（除首页之外的源代码的目录） src/main.js （JS 入口文件） src/App.vue（组件） 一、index....
vue填坑记1-2019.4.1
fangfangtulk的专栏
04-01 2389
使用了vue脚手架 1.路由： 使用路由目的是使用template组件，动态加载和指向。分head、content、footer三部分，content区域动态加载vue组件，文件结构如下： index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m...
VUE开发遇到的问题总结
jerry_0_0的博客
07-16 926
1.打包时图片加载路径的问题 当项目完成时包之后发现登录界面背景图片没有加载出来，以为是图片没有打包上，后来发现是图片的路径不正确。 打包命令 npm run build 问题解决方法 在build文件夹下的utils.js文件里添加一行代码即可。 插入的代码 publicPath: '../../', 2.vue组件的引用 使用步骤： 1.引入组件 import Import from './import.vue' 2.注册组件 components: { Import, }, 一定要注册组件
vue项目相关问题（初级）
qq_41867188的博客
11-07 2026
／＊命令用绿色标注＊／ ／＊加代码用 ++ 表示，减代码用 --表示，更改代码用 +-表示＊／ 1.项目初始化 1.$ vue init webpack [项目名称--可省略，默认在当前文件夹下创建] 2.项目名称名最好 纯小写 。 3.按回车并填入/选择相关信息。(vue-router 必备) 4.创建完成后，会自动生成多个配置文件，如果看见这些文件/文件夹，则说明初始化成功 ...
如何应对vue项目优化的需求，掌握这“神器”就够了
01-08
该文章是博主针对之前做的一个vue移动端项目进行优化之后的总结，项目用的是vue-cli3 + spa。本文章针对的是简单的首屏加载优化，该文章还有后续版本。 分析 vue-cli 3.x自带了分析工具，直接运行vue-cli-service ...
Vue项目的优化资源整理
12-20
Vue 项目优化主要关注代码效率、用户体验和资源加载速度。以下是一些关键的优化策略： 1. **使用 `keep-alive` 缓存组件** `keep-alive` 是 Vue 中用于缓存组件实例的一个抽象组件，它可以避免组件在切换时进行...
【前端】Vue.js中的指令以及其用法
Kevin's life
02-18 603
v-bind v-on v-model v-for v-html v-text v-if v-else-if v-else v-show v-once v-pre v-cloak 1、声明式渲染有两种方法 A、文本插值，用两个花括号：{{内容}} html如下： &amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;quot;app&amp;amp;amp;amp;quot;&a
webpack安装、基础配置
狂野的心跳的博客
04-25 916
首先新建一个文件夹，比如 my-first-webpack ，初始化项目，得到一个 package.json 文件 npm init 然后安装 vue、webpack、webpack-dev-server npm install vue --save npm install webpack webpack-dev-server --save-dev 这里，我用的是 webpack...
Vue笔记
weixin_44860598的博客
07-23 396
文章目录基础vue是什么MVVM生命周期基础语法mustache语法v-oncev-htmlv-textv-prev-cloakv-bind计算属性computed块级作用域var和letconstv-onv-if、v-elsev-showv-for遍历ES6基本语法对象增强 基础 vue是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既
vue面试题
weixin_45838066的博客
04-16 1872
第2节 vue面试题(56道)# 摘讲# 02 vue-cli3搭建项目之webpack配置 15 vue虚拟dom *** 17 vue路由传参问题 25 vue hash 和history的区别 *** 20 Vue的响应式原理 28 v-if v-for 在哪个钩子函数中解析 *** 57 初识vue3(了解) 58 初识typescript(了解) 59 初识webpack 01 插件和组件的区别 **# Vue组件（component）用来构成你的App的业务模块，它的目标是
之前一直没有注意，vue-cli脚手架搭建的项目的index.html是怎样加载js 、css的。
柠檬不萌只是酸i
10-18 1727
<!-- built files will be auto injected --> 翻译：“生成的文件将自动注入” 在index.html页面，会看到body 里面有一行注释，打包后的文件会被自动的注入。 这就是为什么index.html里面没有引入js和css，也直接可以运行了。 ...
Vue项目打包优化
lijincheng2022的博客
02-06 1249
这时候，就可以不将这些组件库打包，单独引入这些组件库的CDN，通过CDN来加载这些文件，这样速度将会大幅提升。在这段代码中，vue、vue-router、element-ui、axios、echarts就是包名。根据分析报告，可以发现，Element UI组件库和echarts库占的空间比相对较大。而value值中的windows对象的方法或属性，就是要查看js包中对应的代码。打开js代码，搜索module，就可以查找到。中，查找需要配置CDN的插件对应的版本。这里的key值中的第三方包名，就是在。
【VUE 笔记】进阶内容
JT61100的博客
07-22 1385
Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）最新的版本是 4.x文档 Vue CLI如果下载缓慢请配置 npm 淘宝镜像全局安装 @vue/cli切换到创建项目的目录，使用命令创建项目选择使用 vue 的版本启动项目打包项目暂停项目Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行 src/components/School.vue src/components/Student.vue src/App.vue src/main.js publ
手把手教你通过vue-cli搭建手机端框架
sunnyfan的博客
09-25 2010
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qas8iB2j-1600968157093)(https://img.hacpai.com/bing/20200613.jpg?imageView2/1/w/960/h/540/interlace/1/q/100)] 前言：欢迎前端的小伙伴们前来围观、学习借鉴，如果你是后端、测试和其他的小伙伴也没关系，如果自己也想玩一下前端，想搭建一个前端的框架，那么不妨静下心来看看这篇文章。如果你不是从事开发工作的人员，内容可能相对而言比较枯
电商后台管理系统——首页内容定制
实践求真知
09-15 603
一点睛 不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制。 二定制过程 1修改vue.config.js,配置如下 module.exports = { chainWebpack: config => { // 发布模式 config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clea...
vue项目根目录下index.html中的id=“app“，与src目录下的App.vue中的id=“app“为什么不会冲突
独斟灬此夜的博客
05-01 1127
使用cli构建项目后，在根目录下有个index.html文件，其中有一行代码为： // index.html <body> <div id="app"></div> <!-- built files will be auto injected --> </body> 而src目录下的App.vue中也有id="app"的代码 // APP.vue <template> <div id="app">
项目打包优化，体积减少了 97%
生产队队长
08-22 446
0. 直接打包 npm run build 1. 按需加载第三方库 例如 ElementUI、lodash 等 npm install babel-plugin-component -D babel.config.js module.exports = { presets: ['@vue/cli-plugin-babel/preset'], plugins: [ [ 'component', { libraryName: 'element-ui'
vue项目优化面试题
最新发布
04-12
在Vue项目优化面试题中，有几个常见的优化方案可以考虑： 1. 减少大数据获取和渲染：设计上避免一次性获取和渲染大量数据，可以采用分页加载或者懒加载的方式，只在需要时获取和渲染部分数据。 2. 虚拟表格优化...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值