vue 2.x升级到vue 3.x 编译启动、热更新速度还是非常慢

发布于 2022-09-11 21:23:35 字数 1558 浏览 14 评论 0

问题描述

vue 2.x升级到vue 3.x 编译启动、热更新速度并没有改善，随项目需求增加速度现在基本在60s左右

使用工具

Node: 10.13.0
Yarn: 1.12.3
vue@^2.6.10
@vue/cli: 3.7.0
yarn@v1.12.3
webpack@4.28.4
@vue/preload-webpack-plugin: 1.1.0

问题背景

前段时间同事把vue 2.x项目升级为vue 3.x，他把代码推上git，我进行开发的时候，把vue-cli升级到3，再直接把代码pull下来，问题是，同事升级了vue-cli3之后，编译启动、热更新基本上在8s以内，我每次编译启动、热更新基本上去到45s以上，我们对比了一下node的版本、vue-cli版本和webpack版本，无明显差异，我跟同事都不得其解

尝试方案

1 升级node 速度并无明显提升
2 切换为同事所在的开发分支
从git上重新clone了一份新代码，并只跟踪并pull下同事当前所开发的分支编译速度仍在27~28s
3 压缩图片资源、使用DllPlugin 和 DllReferencePlugin
从vue-ui任务板块中观察到编译需要的资源、依赖的体积确实减小，编译速度也有所提升（从60s下降到45s，但跟同事不使用dllPlugin等，也不压缩图片资源能达到5-6s编译成功并启动的速度相差仍然很大）

相关代码

同事的vue.config.js 没有使用dllPlugin,速度依然快到飞起...

const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)

module.exports = {
  publicPath: '/', // 部署应用包时的基本URL
  outputDir: 'dist', // 构建输出目录
  assetsDir: 'static', // 静态资源(js、css、img、fonts)目录
  lintOnSave: true, // 是否开启eslint保存检测
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  productionSourceMap: false, // 生产环境的 source map
  devServer: {
    port: 8085,
    proxy: {
      ...省略
    }
  },

  // webpack配置
  chainWebpack: (config) => {
    // 添加别名
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('common', resolve('src/common'))
      .set('components', resolve('src/components'))
      .set('views', resolve('src/views'))
      .set('api', resolve('src/api'))
  }
}