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