主页 > 杏运资讯 > 媒体通稿

nuxt性能优化之-打包优化

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

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

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



blog/1636254970837.image.png


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

  • 的图标全部加载了进来
  • 过大,单独提取
  • 业务代码中的公共业务模块提取打包到一个模块

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

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

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


然后再下配置



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





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


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

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

ant-design-vue图标按需加载

×

扫一扫关注 集团官方微信

平台注册入口