性能优化 - 优化项目打包体积，减少首屏加载速度

设置mode

如果你的环境变量用的是vuecli3自带的production，则不需要设置，因为本身是开启的，但是如果你自定义了上线的环境变量，比如prod，online等，则需要配置一下，配置之后体积会立马少一半哦~

configureWebpack: (config) => {
    config.mode = 'production'
}

开启GZIP

当然nginx也要做相应的配置哦，自行让公司的运维同学去百度吧，一堆一堆的~

npm install compression-webpack-plugin -D

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
    plugins: [
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
        threshold: 10240, // 归档需要进行压缩的文件大小最小值，我这个是10K以上的进行压缩
        deleteOriginalAssets: false // 是否删除原文件
      })
    ]
}

开启之后，如何看是否开启成功了呢，打开网站，然后控制台，看看加载的资源响应体内Content-Encoding 是否为gzip，如果是则成功了，也可以设置一下很直观能看到这个属性值，如下图，右键之后进行框框内操作，最后它就出来了~

打包可视化插件 看各占体积大小

如果还觉得这样之后加载很慢，不防看看都是什么导致的体积大
npm run build --report 之后就能打开一个图，里面可以查看各个打包文件的体积了~

npm install webpack-bundle-analyzer -D
npm run build --report

chainWebpack: config => {
    if (process.env.npm_config_report) {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        .end()
    }
}

按需加载

比如项目中引入了UI库，比如vant，只是用了部分的组件，所以不用全部引入

import Collapse from 'vant/lib/collapse'
import 'vant/lib/collapse/style'
Vue.use(Collapse)

比如项目中用了图表库，比如F2，只是用了柱状图，折线图之类的，也不用全部引入
下面是我自身项目中所用到的，如有用到的同学，可做参考哦~

// 引入核心包 Core
const F2 = require('@antv/f2/lib/core')
// 几何标记模块，用户绘制具体的图形
require('@antv/f2/lib/geom/line') // 折线图
require('@antv/f2/lib/geom/area') // 面积图
require('@antv/f2/lib/geom/interval') // 引入 interval 几何标记
// 坐标系
require('@antv/f2/lib/coord/polar') // 极坐标
// adjust 数据调整类型
require('@antv/f2/lib/geom/adjust/stack') // 只加载层叠类型
require('@antv/f2/lib/geom/adjust/symmetric') //
// Axis 坐标轴类型
require('@antv/f2/lib/component/axis/circle') // 弧长坐标轴（用于极坐标）
// Tooltip
const Tooltip = require('@antv/f2/lib/plugin/tooltip')
F2.Chart.plugins.register(Tooltip)
// Legend
const Legend = require('@antv/f2/lib/plugin/legend')
F2.Chart.plugins.register(Legend)
// intervalLabel
const intervalLabel = require('@antv/f2/lib/plugin/interval-label')
F2.Chart.plugins.register(intervalLabel)
// Animation
const Animation = require('@antv/f2/lib/animation/detail')
F2.Chart.plugins.register(Animation)
// Guide
require('@antv/f2/lib/component/guide/html') // 只加载 Guide.Html 组件
const Guide = require('@antv/f2/lib/plugin/guide') // 加载插件
F2.Chart.plugins.register(Guide)
export default F2

比如用到了moment，lodash都可以做按需加载
不过自身试过lodash的，好像不太好用，网上查了查也说是有坑，不知道是不是我自身问题，此处也贴出来代码吧，如果有用着还不错的，记得同步我方法~

npm install lodash-webpack-plugin -D

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
chainWebpack: config => {
    // 按需加载lodash
    config.plugin("loadshReplace").use(new LodashModuleReplacementPlugin())
}

// babel.config.js
module.exports = {
  plugins: ['lodash']
}

压缩js代码，去掉注释,打印等

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'prod') {
      return {
        plugins: [
          new UglifyJsPlugin({
            uglifyOptions: {
              // 删除注释
              output:{
                comments:false
              },
              compress: {
                drop_debugger: true，
                drop_console: true
              }
            },
            sourceMap: false,
            parallel: true
          })
        ]
      }
   }
}

抽离css文件

这个呢，在vuecli3的项目中，用MiniCssExtractPlugin这个插件似乎是不太好用，官方提供了抽离方法，只需要设置extract: true即可
但是如果是分片打包，本身js就很多，在抽离出来好几个css文件，也说不出来到底是抽离出来好，还是放在js文件中比较好，自己取舍吧

css:{
    extract:true
}

其他没用到的

比如说cdn，但是项目中没用，也懒得改了，so亲们自己尝试吧
比如图片压缩等
比如尽可能要用字体文件哈
比如你们还有什么可以评论告诉我
毕竟我是个小菜鸟，哈哈哈