WEBPACK性能优化

Question

VUE2项目和VUE3项目做了什么性能优化？
最近面试经常问这个，给我一点你们实际开发中的例子
不要网上的东西
要真实开发过程的东西，VUE2,VUE3都告诉我一点
WEBPACK是怎么优化的

我整个项目打包完才6M，就没做过很大的项目，老是问我这个问题都不知道怎么答

不要网上的东西，给我点真实的东西，最好附上代码案例

Answer 1

GPT回答，我把关，你要的config.js优化

在 vue.config.js 文件中，可以通过配置不同的参数和插件来对 Vue 项目进行优化。以下是一些常见的优化方法：

1. 配置webpack：通过configureWebpack选项，可以自定义 webpack 配置，包括输出、代码分割、压缩等。

module.exports = {
  configureWebpack: {
    // 添加分离打包配置
    optimization: {
      splitChunks: {
        chunks: 'all'
      },
      runtimeChunk: true
    }
  }
}

1. CDN引入第三方库：将一些不常更改的第三方库通过 CDN 引入，减少打包体积。

module.exports = {
  chainWebpack: config => {
    config.externals({
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter'
    });
  }
};

1. 代码压缩优化：通过js、css、minimize等配置项开启代码压缩，减小文件体积，在production环境下会自动进行。

module.exports = {
  productionSourceMap: false,
  css: {
    extract: true,
    sourceMap: false,
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-preset-env')()
        ]
      }
    }
  }
};

1. Gzip压缩：配置服务器开启对 Gzip 压缩，减小网络传输文件体积。

module.exports = {
  devServer: {
    compress: true
  }
};

1. 图片压缩：在构建时通过插件进行图片压缩，减小图片尺寸，提高加载速度。

const ImageminPlugin = require('imagemin-webpack-plugin').default;

module.exports = {
  configureWebpack: {
    plugins: [
      new ImageminPlugin({
        test: /\.(jpe?g|png|gif|svg)$/i
      })
    ]
  }
};

以上是一些在 vue.config.js 中进行优化的方法，可以根据具体项目的需求和情况，选择适合的优化方式。