nuxt按需引入组件库（却加载所有图标问题），nuxt性能优化。

做一个官网，nuxt按需引入了antd_vue组件库，但是项目打包时，图标却又500K+,经过排查，发现icon和其他组件环环相扣的。如下：（我引入了这个翻页的组件，里面包含了两个翻页的图标）

但是它里面确实直接引入了所有的icon图标。解决方案：

const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require("compression-webpack-plugin");
export default {
  
  build: {
    extractCSS: true,
    // analyze: true,
    // 为防止重复打包
    vendor: ['axios'],
    analyza: {
      analyzeMode: 'static'
    },

    plugins: [
      // 内存占用大小查看
      // new BundleAnalyzerPlugin(),
      // gzip压缩
      new CompressionPlugin({
        test: /\.(js|css|png|jpg)(\?.*)?$/i, //需要压缩的文件正则
        threshold: 10240, //文件大小大于这个值时启用压缩
        deleteOriginalAssets: false, //压缩后保留原文件
      })

    ],

    assetFilter: function(assetFilename) {
      return assetFilename.endsWith('.js');
    },
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000
      }
    },
    extend(config, {
      isDev,
      isClient
    }) {
     
      // 通过配置别名,处理图标过大问题,当请求这个@ant-design/icons/lib/dist$图标地址时，请求本地按需加载的icon.js

config.resolve.alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './plugins/icons.js') } 
}, 
}