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'
}
  }
 }
}

yarn build --report

// 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;

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

<link href="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.css" rel="external nofollow" rel="stylesheet">
<script src="/UploadFiles/2021-04-02/vuetify.min.js">

这里其实有一些更好的方式，可以通过 webpack 参数传给 index.html，通过 ejs 引入，现在比较简单，这里就没做了


五、效果


通过上面几个策略，最终包大小从 1.72 M 优化到 94k

六、后续


总体看来，优化效果是明显的，但是还有后续可以做的事情：

  
更精细化优化，应该可以结合 webpack 做更深的定制化
  
对上面说到的 cdn 上的第三方库做整合，毕竟直接放在 index.html 里太散，并不是很好的项目结构，也不利于后面开发
  
对后续的代码开发做规范，比如三方库引用的规范、资源的引入规范等等，可以做的事情还是很多的
  
每次部署前的性能测试，主要看看页面加载速度是否达标

可以做的事情还很多，有时候做一件事，达成目标并没有结束，维持目标也是需要考虑的