原文我的博客:原文?nuxt性能优化之-打包优化
打包优化,可以说是前端工程化必不可少一个必备技能,接下来就以为自己博客的项目,进行打包优化,请各位看官多多提意见,一起进步。
由于用的是,刚好官方本身就支持打包分析,所以首先在开启打包分析,就可以更直观的看出各个都大小
从图中看出,非常的大,足足占了7成,所以可以从下面几个方面进行优化
- 的图标全部加载了进来
- 过大,单独提取
- 业务代码中的公共业务模块提取打包到一个模块
找到问题所在,下面就根据上面问题一一解决
利用webpack4的来按照自己制定的配置来拆分,所有配置请看 文档链接
在src目录下新建一个文件,导入自己需要的图标
然后再下配置
在nuxt中,已有对应的配置接口
优化完后的大小
相比之前小了,打包后的文件代码逻辑也更加清晰了
最后还有一个小点,可以把静态资源放到cdn上面,配置,这样打包后的静态资源引用,便会对应上