vue项目使用webpack打包的文件过大

最新推荐文章于 2025-03-17 14:56:47 发布

悦悦猪

最新推荐文章于 2025-03-17 14:56:47 发布

阅读量1.5k

点赞数

分类专栏： vue webpack 文章标签： vue webpack npm run build app.js vendor.js

本文链接：https://blog.csdn.net/zhangxiaodui/article/details/102716571

版权

本文记录了优化Vue项目以提高首次加载速度的过程。通过删除未使用的库、禁用sourceMap、实现路由懒加载、考虑使用CDN以及启用gzip压缩，显著减少了app.js和vendor.js的大小，最终实现了一两秒内快速加载官网。同时提醒，当使用CDN引入Vue时，确保script标签位置正确，避免Vue未定义的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景

最近被反馈说用vue做的一个官网首次加载很慢，要好多秒，需要进行一下优化，下面说一下我的探索历程。
1.这是中途接手的一个项目，我发现里面有一些本地的第三方库并没有用到或者node modules里已经有了，比如font awesome，bootstrap等，我就把她们删掉了，还有多余的图片也删掉了。
2.从网上搜了方法，把config文件夹下的index.js文件里的productionSourceMap本来是true，设为了false，就是不生成map文件了，至此进行了一次打包，整个文件夹大小是少了很多。
3.打开官网的速度快了一些，但是还要5-6秒，然后发现一些js文件很大，比如app.js和vendor.js都将近1M了。
这个时候去查看路由文件，一开始是没有进行路由懒加载，后来改为路由懒加载之后app.js文件变小了。
4.但是这个时候打开官网的速度还是慢的，因为vendor.js也很大，从网上搜索方法，说引入第三方库太多了，使用cdn，当时尝试vue和elementUI使用cdn引入，还要在webpack.base.conf.js里加externals: {这里写使用cdn引入的库的键值对}是快了，但是后面发现还有更快的方法。
5.最终我没有做第四步，也就是使用cdn，而是使用了gzip,先npm install --save-dev compression-webpack-plugin@1.1.11, 然后前端打开config文件夹下的index.js文件，找到productionGzip设置为true。之后让后台nginx开启gzip模式访问。这个时候再打开官网的速度就加快很多了，目前一两秒就可以加载出来了呢。<

最低0.47元/天解锁文章