CSDN|VUE 项目如何快速优化？| 原力计划( 三 )

安装@bable/plugin-syntax-dynamic-import包
在babel.config.js配置文件中声明该插件
将路由改为按需加载的形式：

const Login = => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')const Home = => import( '../components/Home.vue')const Welcome = => import( '../components/Welcome.vue')

其中webpackChunkName 指定了打包的文件名字，让 Login.vue 、Home.vue 、 Welcome.vue 统一打到指定的包中。
开启gizp配置：
这一项应该由后端小哥来做，使用gizp可以减少文件体积，使得传输速度更快，我们就拿Express来展示一下如何去做。

//安装相应的包npm install compression -D //导入包const compression = require('compression')//启用中间件app.use(compression)

这样我们请求包的体积就会变得更小，有助于提升我们项目运行的速度。
最终效果展示

本文插图
最终在我们经过上述一系列的操作以后，我们最终生产环境打出来的包体积只有356.2KB ，这样我们项目在上线以后，就可以减轻首页假死的问题，同时因为请求的文件小了很多，所以运行速度也会加快，大家赶快去优化一下自己的项目吧。
版权声明：本文为CSDN博主「靖凡无所畏惧」的原创文章，遵循CC 4.0 BY-SA版权协议。原文：https://blog.csdn.net/wjf1997/article/details/106248699