Vue 包大小优化

优化前的包大小

这必须得优化一下，优化前得大致定一下目标，目标又需要指标来衡量，所以定了两个指标：

1. 页面加载时间不多说，至少得 1s 以内，越快越好
2. 包大小控制在 200k 以内

方案

几个策略

1. 代码混淆
2. 资源放到 cdn，因为开发的时候图省事，资源放在 assets 下面，直接 require 引入了，这也是一个大头
3. 无用库删除，功能相近的库合并，只用到少部分功能的库，看看能否自己实现
4. gzip 压缩
5. 第三方库也放到 cdn

执行

代码混淆

const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
  configureWebpack: (config) => {
    //  引入uglifyjs-webpack-plugin
    let UglifyPlugin = require('uglifyjs-webpack-plugin');

    if (process.env.NODE_ENV == 'production') {
      // 压缩混淆
      config.mode = 'production'
      // 将每个依赖包打包成单独的js文件
      let optimization = {
        minimizer: [new UglifyPlugin({
          uglifyOptions: {
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']
            }
          }
        })]
      }
      Object.assign(config, {
        optimization
      })
    } else {
      // 为开发环境修改配置
      config.mode = 'development'
}
    }
  }
}

4. gzip 压缩

// vue.config.js
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV == 'production') {
      // ...
      // gzip
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /\.js$|\.html$|\.json$|\.css/,
        threshold: 10240,
        minRatio: 0.8
      }))
    }
    // ...
  }
}
// nginx 直接开启下面的配置
gzip_static on;

第三方库放到 cdn

module.exports = {
  // ...
  configureWebpack: (config) => {
    if (process.env.NODE_ENV == 'production') {
      // 第三方库不打包，使用 cdn
      config.externals = {
        vuetify: 'Vuetify'
      }
    } else {
      // 为开发环境修改配置
      config.mode = 'development'
      config.externals = {
        vuetify: 'Vuetify'
      }
    }
  }
}

效果