Vue项目打包优化（MD.10）

最新推荐文章于 2024-07-05 11:36:09 发布

夏尔の

最新推荐文章于 2024-07-05 11:36:09 发布

阅读量593

点赞数 1

分类专栏： Vue 筑梦漫岛网站搭建文章标签： Vue打包 Vue压缩 Vue项目优化

本文链接：https://blog.csdn.net/qq_16371909/article/details/83652957

版权

本文介绍了在Vue项目中进行打包优化的几个关键步骤，包括利用路由懒加载减少vendor.js体积，开启gzip压缩进一步减小包大小，以及考虑将部分库移出打包文件，通过CDN引入。这些方法有效提升了项目的加载速度，改善了用户体验。

摘要由CSDN通过智能技术生成

好久不见，最近很忙，大家依然可以关注漫岛的最新动态。
今天要说的是Vue项目的一些打包技巧，都是我在漫岛使用过的，因为我们没钱买高配置服务器（目前还是个测试服务器），所以就只能把优化做到更优了。
随着项目开发，上线包体积的增大，尤其是我们的vendor.js,这会让项目首屏加载缓慢，白屏好一阵子，这显然是很loser的。于是我便进行了以下几步操作，成功的优化了vendor.js的体积，以前1m多的现在只有200来k。直接说我具体用了哪些手段吧！

1.路由懒加载
vue-router为我们提供了路由懒加载功能，非常省心，使用也简单。在router.js里面，原来这么写的

//原来这么引入的模块的
import UserHome from  '@/views/user/UserHome.vue';
import ImageWorks from '@/views/user/user-works/ImageWorks.vue'
//现在是按需引入
const UserHome = () =>
	import( /* webpackChunkName: "group-userhome" */ '@/views/user/UserHome.vue');
const ImageWorks = () =>
	import( /* webpackChunkName: "group-userhome" */ '@/views/user/user-works/ImageWorks.vue');

const VideoWorks = () =>
	impor