如转载,请注明出处,谢谢。

vue项目优化总结

1、 开发环境下载性能分析插件,使用交互式可缩放树图可视化webpack输出文件的大小,便于分析;

npm install --save-dev webpack-bundle-analyzer
 /* vue.config.js */
chainWebpack(config) { //对webpack配置进行更改的方法
 /* 添加性能分析工具 */
 config
  .when(process.env.NODE_ENV !== 'production', //环境判断条件
        config => {
  config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
            .end()
})
}

   2、 图片压缩

npm install image-webpack-loader --save-dev

提示:如果下载失败,推荐使用cnpm下载

npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm install image-webpack-loader --save-dev
 /* vue.config.js */
chainWebpack(config) {
  /*set image压缩 */
       config.module
          .rule("image")
          .test(/\.(gif|png|jpe?g|svg)$/i)
          .use("image-webpack-loader")
          .loader("image-webpack-loader")
          .options({
               mozjpeg: {
                   progressive: true,
                   quality: 65
              },
               optipng: {
                   enabled: false
              },
               pngquant: {
                   quality: [0.65, 0.90],
                   speed: 4
              },
               gifsicle: {
                   interlaced: false
              },
               webp: {
                   quality: 75
              }
          })
          .end()
}

 3、 启用GZip压缩

npm install compression-webpack-plugin --save-dev

提示: 此项需要服务端开启gzip,前端在nginx已配置完毕,具体请参考前端部署文件;
const CompressionPlugin = require('compression-webpack-plugin')
/* vue.config.js */
chainWebpack(config) { //对webpack配置进行更改的方法
/* 启用GZip压缩 */
    config
      .when(process.env.NODE_ENV === 'production', //环境判断条件
       config => {
           config
          .plugin('compression')
          .use(new CompressionPlugin({
               algorithm: 'gzip',
               test: new RegExp('\\.(' + ['js', 'css', 'html'].join('|') + ')$'), // 匹配文件名
               threshold: 10240, //处理小于10k文件
               minRatio: 0.8, //只有压缩率比这个值小的资源才会被处理
               deleteOriginalAssets: false //是否删除原资源
          }))
          .end()
      })
}

4、 CDN加载

/* vue.config.js */
const isProduction = process.env.NODE_ENV !== 'development' // 是否为生产环境

const devNeedCdn = false  // 本地环境是否需要使用cdn

// cdn链接
const cdn = {
   // cdn:模块名称和模块作用域命名(对应window里面挂载的变量名称)
   externals: {
      vue: 'Vue',
      vuex: 'Vuex',
      vue-router: 'VueRouter'
  },
   // cdn的css链接
   css: [],
   // cdn的js链接
   js: [
      'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
      'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
      'https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js'
  ]
}

configureWebpack: {
   resolve: {
     alias: { // 别名配置
       '@': resolve('src')
    }
  },
   externals: (isProduction || devNeedCdn) ? cdn.externals : {} //三元判断是否注入cdn加载
},
 
//然后在/public/index.html中这样写:
  <!-- 使用CDN的CSS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
        <link  href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
  <% } %>
  <!-- 使用CDN的JS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
       <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
   
   // 注意:删除main.js中的相应import from, 因为如果不删除,打包的时候还会把这两个文件打进去

 

5、 去除map文件

vue.config.js中设置 productionSourceMap为false,打包后就没有map文件了,减少包体积;

6、 路由懒加载

  // 第一种:vue异步组件技术

{ path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) };
//第二种:使用import

// 下面这2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。
const Index = () => import('@/components/index')
const About = () => import('@/components/about')

// 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。
// 把组件按组分块
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home');
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index');
//第三中:webpack提供的require.ensure()  多个路由指定相同的chunkName,会合并打包成一个js文件

{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') };

{ path: '/index', name: 'Index', component: r => require.ensure([], ()=>r(require('@/components/index')), 'demo') };

// r就是resolve
const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');

// 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载
const router = new Router({
routes: [
{
path: '/list/blog',
 component: list,
name: 'blog'
}
]          
})

7、 其他

 
1、代码模块化:常用功能单独封装成组件,避免重复冗余代码出现,方便复用;

2、for循环设置key值,在用v-for进行数据遍历渲染的时候,为每一项都设置唯一的key值,为了让Vue内部核心代码能更快地找到该条数据,当旧值和新值去对比的时候,可以更快的定位到diff。

3、可以使用keep-alive,keep-alive是Vue提供的一个比较抽象的组件,用来对组件进行缓存,从而节省性能。

4、更加理解Vue的生命周期,不要造成内部泄漏,使用过后的全局变量在组件销毁后重新置为null。

5、减少图片使用,可以使用字体图标或者雪碧图开代替直接加载图片;

6、按需引入,比如一些第三方资源elementUI,我们可以只引入需要用到的组件,避免引入不需要使用的部分,无端增加项目体积;
   import {Input,Select} from 'element-ui';
   Vue.use(Input);
   Vue.use(Select);

 

其实还有css分包加载,但是因为现有项目不太需要,所以没加,以上就是vue优化总结,有需要的补充的请留言给我哦~