Nuxt ant-design icon 打包太大优化

前言

　　Nuxt 项目中发现一个问题，项目打包后antd中的图标过大，导致用户的体验性变差，以下配置可以解决此问题

　　未优化前如下图：（chuk-antdIcon 就是antd 图标打包后的文件，后面会说明 其名字为什么为 chunk-antdIcon)

　　

 

 

 　　优化后：

　　

 

 

步骤：

1. 在 plugins/assets 目录中创建一个 antd-icons.js(名字自定)
2. 在antd-icons.js 文件中添加你需要的 图标，例如：
   

   export {
     default as MenufoldOutline
   } from '@ant-design/icons/lib/outline/MenufoldOutline'

3. 在根目录下的 nuxt.config.js 中 找到build  添加如下代码：
   

   analyze: true，// 打包分析， true 为打开， false 为关闭  
       extend(config, ctx) {
          config.resolve.alias['@ant-design/icons/lib/dist$'] =         resolve('./plugins/antd-icons.js') // 引入需要的图标，resolve 为 path.resolve 
       }, 
       terser: true, // 是否开启 js 代码压缩
       optimizeCSS: true, // 是否分割 css样式
       optimization: { // 分割代码
         minimize: true,
         splitChunks: {
           chunks: 'all',
           maxSize: 500000, // 拆分之前最大的数值，默认为0，即不做限制
           cacheGroups: {
             vendors: {
               chunks: 'initial',
               test: /[\\/]node_modules[\\/]/,
               priority: 10,
               name: 'chunk-vendors',
             },
             antd: { // antd 组件库分割
               test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
               name: 'chunk-antd',
               priority: 20,
             },
             antdIcon: { // antd 图标库分割
               test: /[\\/]node_modules[\\/]@ant-design[\\/]/,
               name: 'chunk-antdIcon',
               priority: 15,
             }
           },
         },
       },

   上文中的 chunk-antdIcon 即为图标库分割的名字

4. 运行打包 yarn build 完成