关于vue-cli 3配置打包优化要点（推荐）

我来详细讲解一下关于Vue-CLI 3的打包优化要点。

1. 配置文件

Vue-CLI 3的配置文件是通过vue.config.js文件进行配置的。我们可以在这里设置打包的基本配置、压缩代码、CDN等。

2. 代码分割

代码分割是优化打包体积的一个非常重要的方式。一般来说，我们可以通过以下方式进行代码分割：

• 异步组件：在路由懒加载、组件懒加载的时候使用import语法（或者require.ensure()），这样会将异步组件单独打包，减小了主文件的体积。

• 第三方库分离：我们可以将一些第三方库单独打包，通过CDN引入，这样可以减小主文件的体积，提升加载速度。

以上是两个示例，你可以按照这些示例进行配置。当然，具体分割策略需要根据项目情况具体分析，进行细化。

3. 压缩代码

在Vue-CLI 3中，我们可以通过terser-webpack-plugin进行代码压缩。该插件是Webpack自带的，只需要在vue.config.js文件中进行配置即可。

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

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true
            }
          }
        })
      ]
    }
  }
}

上述代码中，我们配置了TerserPlugin进行代码压缩，并通过drop_console选项删除了控制台输出。

4. 图片压缩和Base64编码

对于一些小的图片，我们可以将它们转换为Base64编码，不需要额外发送请求去获取图片，也可以减少文件体积，提升打包速度。可以通过url-loader进行配置。

module.exports = {
  chainWebpack(config) {
    config.module.rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options.fallback.options.name = 'img/[name].[hash:8].[ext]'
        options.limit = 4096
        return options
      })
  }
}

上述代码中，我们配置了url-loader对图片进行Base64编码，并将小于4KB的图片进行压缩。

以上就是几个Vue-CLI 3打包优化要点的示例。根据具体项目实际情况，你还可以通过分析Webpack打包过程，进行针对性的优化。