nuxt性能优化之-打包优化

原文我的博客:原文 nuxt性能优化之-打包优化

打包优化

打包优化，可以说是前端工程化必不可少一个必备技能，接下来就以为自己博客的项目，进行打包优化，请各位看官多多提意见，一起进步。

由于用的是nuxt，刚好官方本身就支持打包分析，所以首先在nuxt.config.js开启打包分析，就可以更直观的看出各个js都大小

// 开启打包分析
analyze: true

//然后在控制条运行yarn build --analyze

分析

从图中看出，vendos.app.js非常的大，足足占了7成，所以可以从下面几个方面进行优化

• ant-design的图标全部加载了进来
• v-md-editor过大，单独提取
• 业务代码中的公共业务模块提取打包到一个模块

开始优化

找到问题所在，下面就根据上面问题一一解决

利用webpack4的splitChunks来按照自己制定的配置来拆分，所有配置请看 文档链接

ant-design图标按需加载

在src目录下新建一个js文件，导入自己需要的图标

// export what you need
export {
  default as CheckCircleOutline
} from '@ant-design/icons/lib/outline/CheckCircleOutline'

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

然后再nuxt.config.js下配置alias

alias: {
    images: resolve(__dirname, './assets/images'),
    css: resolve(__dirname, './assets/css'),
    '@ant-design/icons/lib/dist$': resolve(__dirname, './src/icons.js')
  },

v-md-editor抽离

在nuxt中，已有对应的配置接口

optimization: { // 拆分大文件
      splitChunks: {
        cacheGroups: {
          mdEditor: {
            name: 'chunk-v-md-editor',
            priority: 20,
            test: /[\\/]node_modules[\\/]@kangc/
          },
          ...
        }
      }
    },

公共业务模块提取

optimization: { // 拆分大文件
      splitChunks: {
        cacheGroups: {
          default: {
            name: 'chunk-commons',
            chunks: 'initial',
            minChunks: 3, // 模块被引用3次以上的才抽离
            priority: -20
          }
          ...
        }
      }
    },

最后

优化完后的大小

相比之前小了140kb，打包后的文件代码逻辑也更加清晰了

最后还有一个小点，可以把静态资源放到cdn上面，配置publicPath，这样打包后的静态资源引用，便会对应上

参考

ant-design-vue图标按需加载