Vue2 打包优化首屏加载速度

孙先森428

已于 2024-04-24 11:38:18 修改

阅读量1k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： Vue2 文章标签： vue.js webpack

于 2024-04-24 11:32:52 首次发布

本文链接：https://blog.youkuaiyun.com/Everglow___/article/details/138153722

本文讲述了如何通过使用compression-webpack-plugin压缩打包文件、配置webpack进行分包，以及在服务器（如Tomcat和Nginx）中启用GZIP压缩，来解决Vue2项目中chunk-vendors.js文件过大导致的首屏加载速度问题。

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

之前做的Vue2项目，上线后，第一次加载时，发现特别慢，打开控制台后，发现是一个名字叫chunk-vendors.js的文件体积过大，导致首屏加载速度特别慢。这个js文件是项目中引入的第三方库打包而成的，如何解决打包后文件体积过大问题？

一、Vue2 项目打包优化

1. 使用 compression-webpack-plugin 对打包文件进行压缩

安装插件：

npm i compression-webpack-plugin@10.0.0

vue.config.js：

/ 引入
const CompressionPlugin = require('compression-webpack-plugin')
const zlib = require('zlib')
// 1. 插件配置
plugins: [
     new webpack.IgnorePlugin({
   
   
          resourceRegExp:/^\.\/locale$/,
          contextRegExp:/moment$/}),
      //  compression-webpack-plugin 压缩配置
      // 压缩成 .gz 文件
     new CompressionPlugin({
   
   
          filename: '[path][base].gz',
          algorithm: 'gzi