vue项目加载速度优化

最新推荐文章于 2025-06-12 16:06:26 发布

这条gai的靓仔

最新推荐文章于 2025-06-12 16:06:26 发布

阅读量477

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/ChuY123/article/details/130155640

文章介绍了在Vue项目中如何通过cdn引入echarts，以及在main.js和vue.config.js中的配置。讨论了第三方包splitChunk的使用，路由懒加载的策略，并详细阐述了gzip压缩的配置方法，包括在vue.config.js和nginx服务器端的设置。同时，文章提到了在实施路由懒加载后遇到的chunkLoadError问题及其解决方案，包括修改publicPath和错误处理策略。

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

1、echarts使用cdn引入，public/cdn目录下增加 echarts.js 文件，同时在index.html 下增加引用

使用this.$echarts需要在main.js中引入

Vue.prototype.$echarts = window.echarts;

在vue.config.js中忽略echarts

2、第三方包使用splitChunk

3、路由懒加载并分配打包模块，不需要根据每个页面模块划分 chunkName，根据模块划分即可，除非单个页面模块过大

4、使用gzip压缩

gzip在vue.config.js中配置

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            //匹配规格
            test: /\.js$|\.html$|\.css$|\.png$/,
            //文件超过多大进行压缩
            threshold: 10240,
            //是否删除源文件（建议不删除）
            deleteOriginalAssets: false
          })
        ]
      }
    }
  },

nginx打开gzip配置

# 开启和关闭gzip模式
gzip on;
# gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
gzip_buffers 4 16k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 2;
# 进行压缩的文件类型
gzip_types text/plain application/javascript text/css application/xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

5、遇到的坑，路由懒加载分配包之后报错chunkLoadError

解决方案：

publicPath从默认的'/'改为’./'

或者路由加

router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g;
  const isChunkLoadFailed = error.message.match(pattern);
  const targetPath = router.history.pending.fullPath;
  if (isChunkLoadFailed) {
    router.replace(targetPath);
  }
})