nuxt性能优化之-打包优化

·  阅读 340
nuxt性能优化之-打包优化

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

打包优化

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

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

// 开启打包分析
analyze: true

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

分析

blog/1636254970837.image.png


从图中看出,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
          }
          ...
        }
      }
    },
复制代码

最后

优化完后的大小 blog/1636266253943.image.png


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

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

参考

ant-design-vue图标按需加载

分类:
前端
标签:
分类:
前端
标签: