Vue Cli 生成的项目性能优化总结

1.查找各种图片，先单独给图片做处理，之后进行sprit处理（针对那些不变的icon小图标）

2.配置webpack-bundle-analyzer进行代码分析

// package.json文件中增加
  "scripts": {
    "analyz": "NODE_ENV=production npm_config_report=true npm run build"
  },

分析之后主要针对一下几个问题：

1.路由懒加载问题

// 采用箭头函数进行懒加载处理
component: () => import('./index.vue')

2.删除lodash包处理，由于lodash包只用了merge函数处理多语言合并问题，所以，针对性的把这个包给删掉，并且重写了merge函数

3.moment时间函数，由于moment函数中存在很多多语言包，而项目中使用的时候，并未使用到，所以使用了webpack的ignore函数进行忽略locale下的语言包。

config

.plugin('ignore')

.use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))

.end();

4.放弃prefetch方法，首页加载完，不去prefetch其他子页面的代码

config.plugins.delete('prefetch');

5.最终vue.config.js中的代码：

const webpack = require('webpack');

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  chainWebpack: config => {
  /* 添加分析工具*/
    if (process.env.NODE_ENV === 'production') {
      if (process.env.npm_config_report) {
        config
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
          .end();
        config.plugins.delete('prefetch');
      }
    }
    //忽略/moment/locale下的所有文件
    config
      .plugin('ignore')
      .use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
      .end();
  }
}

最终优化截图：

image.png
image.png