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

图片处理

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

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

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

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

路由懒加载问题

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

删除lodash包处理

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

moment时间函数

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

config
  .plugin('ignore')
  .use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
  .end();

放弃prefetch方法

首页加载完，不去prefetch其他子页面的代码

config.plugins.delete('prefetch');

最终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();
  }
}

本文转载至：https://www.jianshu.com/p/2af856f8d79a