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

Lindsy.T
  • 23

问题描述

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'))
  }
}

期待的结果

把编译速度降低到15s

回复
阅读 2.8k
1 个回答

在使用DllReferencePlugin后,通过下面方法,将首次运行速度提升到15s,热编速度提升到5-8s
1 升级node到11.10.1
2 升级yarn到1.13.0

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏