Vue项目性能优化实践-优快云博客

本文链接：https://blog.youkuaiyun.com/weibaobao1314/article/details/108350461

本文主要介绍了Vue项目的性能优化策略，包括按需引入组件、图片压缩合并、代码压缩、路由懒加载以及通过CND加速来提升应用性能。具体措施如使用路由懒加载、设置externals避免重复导入等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目性能优化策略

1.按需引入

2.导入‘element’类似组件时，不要整个导入使用，只需要导入使用的组件

图片的压缩合并

雪碧图(精灵图),在ps中保存的图片的时候按需调整保存格式

3.压缩代码

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    drop_console: true,
    pure_funcs: ['console.log']
  },
  sourceMap: false
})
vue3.0中时在vue.config中
productionSourceMap: false,
//其中sourceMap: false是禁用除错功能。
//如果设为true，在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的情况下仍可进行调试。
//这个功能虽好，但会大大增加整体资源包的体积，所以将其禁用。

4.路由懒加载

方式1

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
  routes: [
//     {
//       path: '/',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }
        {
          path: '/',
          name: 'HelloWorld',
          component: () => import('@/components/HelloWorld.vue')
        }
  ]
})

5.CND加速

在index.html中导入CND资源


 <body>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
 </body>

在bulid/webpack.base.conf.js文件中，增加externals，将引用的外部模块导入，并去掉原来main.js中的import导入

module.exports = {
  entry: {
    app: './src/main.js'
  },
  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex':'Vuex'
  }

去掉import，如：

// import Vue from 'vue'
// import vue-router from 'vue-router'
//vue.js、Router.js等文件会分别由一个线程进行加载。且因为使用了CDN，减轻了带宽压力