请问如何优化解决Vue项目页面变多后编译和热更新变得很慢的问题

Question

问题描述

项目概况:

项目是一个大型的管理系统,基于Ant Design Pro of Vue开发的,使用了动态路由懒加载,路由表是从后端返回的,目前路由大概有200个左右(以后可能还会一直增加).

问题描述:

一开始开发体验还是可以的,后来慢慢的路由页面越来越多,就感觉越来越慢了,现在开发编译需要差不多10分钟,开发的时候随便改一些东西热更新需要100秒左右,构建打包也是需要差不多10分钟.导致开发体验很不好.
尝试过网上搜索寻找原因或者一些方法去优化,但是没有得到解决,甚至变得更慢了.

问题出现的平台版本及自己尝试过哪些方法

开发环境: VSCode win10 x64 ram:16G cpu:Intel Xeon E5-2650
尝试过使用dynamic-import-node或者压缩代码,但是发现路由会加载不成功,或者变得更慢.

相关代码

• package.json

{
  "name": "vue-antd-pro",
  "version": "2.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "serve:local": "vue-cli-service serve --mode local",
    "serve:sit": "vue-cli-service serve --mode sit",
    "build": "vue-cli-service build",
    "build:preview": "vue-cli-service build --mode preview",
    "lint": "vue-cli-service lint",
    "lint:nofix": "vue-cli-service lint --no-fix",
    "test:unit": "vue-cli-service test:unit",
    "postinstall": "opencollective-postinstall",
    "localserver": "node ./server/index.js"
  },
  "dependencies": {
    "@antv/data-set": "^0.10.1",
    "ant-design-vue": "^1.5.3",
    "axios": "^0.19.0",
    "canvas": "^2.6.0",
    "core-js": "^2.6.5",
    "enquire.js": "^2.1.6",
    "hot-formula-parser": "^3.0.2",
    "jquery": "^3.4.1",
    "jquery-ui": "^1.12.1",
    "js-cookie": "^2.2.0",
    "jsplumb": "^2.13.2",
    "lodash": "^4.17.15",
    "lodash.get": "^4.4.2",
    "lodash.pick": "^4.4.0",
    "md5": "^2.2.1",
    "mockjs2": "^1.0.5",
    "moment": "^2.24.0",
    "node-sass": "^4.12.0",
    "nprogress": "^0.2.0",
    "qs": "^6.9.1",
    "sass-loader": "^7.1.0",
    "socket.io-client": "^2.2.0",
    "sockjs-client": "^1.4.0",
    "stompjs": "^2.3.3",
    "viser-vue": "^2.3.3",
    "vue": "^2.5.22",
    "vue-clipboard2": "^0.2.1",
    "vue-codemirror-lite": "^1.0.4",
    "vue-cropper": "0.4.4",
    "vue-esign": "^1.0.5",
    "vue-ls": "^3.2.0",
    "vue-native-websocket": "^2.0.14",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.1",
    "vue-socket.io": "^3.0.7",
    "vue-svg-component-runtime": "^1.0.1",
    "vuedraggable": "^2.23.2",
    "vuex": "^3.1.0",
    "vxe-table": "^2.7.6",
    "vxe-table-plugin-antd": "^1.5.9",
    "wangeditor": "^3.1.1",
    "xe-utils": "^2.2.16"
  },
  "devDependencies": {
    "@ant-design/colors": "^3.1.0",
    "@babel/polyfill": "^7.2.5",
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-plugin-unit-jest": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-plugin-import": "^1.11.0",
    "eslint": "^5.8.0",
    "eslint-plugin-html": "^5.0.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "opencollective": "^1.0.3",
    "opencollective-postinstall": "^2.0.2",
    "vue-svg-icon-loader": "^2.1.1",
    "vue-template-compiler": "^2.5.22",
    "webpack-theme-color-replacer": "^1.2.15"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ]
}

• babel.config.js

module.exports = {
  presets: [
    '@vue/app',
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
  // if your use import on Demand, Use this code
  // ,
  // plugins: [
  //   [ 'import', {
  //     'libraryName': 'ant-design-vue',
  //     'libraryDirectory': 'es',
  //     'style': true // `style: true` 会加载 less 文件
  //   } ]
  // ]
}

你期待的结果是什么？实际看到的错误信息又是什么？

我期待的结果是能够相对流畅一些快一些,实际上看到的结果是:
编译或者热更新的时候,下面这些情况都会卡着很久

70% chunk graph
76% basic chunk optimization RemoveParentModulesPlugin
# 很久之后
Compiled successfully in 557880ms

Answer 1

1、提取公共代码，这是比较普遍的做法

new webpack.optimize.CommonsChunkPlugin('common.js')

2、代码压缩

webpack-parallel-uglify-plugin插件可以并行运行UglifyJS插件，这可以有效减少构建时间，应用于生产环境

3、happypack，happypack 的原理是让loader可以多进程去处理文件

var HappyPack = require('happypack'),
    os = require('os'),
    happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

modules: {
    loaders: [
      {
        test: /\.js|jsx$/,
        loader: 'HappyPack/loader?id=jsHappy',
        exclude: /node_modules/
      }
    ]
}

plugins: [
    new HappyPack({
      id: 'jsHappy',
      cache: true,
      threadPool: happyThreadPool,
      loaders: [{
        path: 'babel',
        query: {
          cacheDirectory: '.webpack_cache',
          presets: [
            'es2015',
            'react'
          ]
        }
      }]
    }),
    //如果有单独提取css文件的话
    new HappyPack({
      id: 'lessHappy',
      loaders: ['style','css','less']
    })
  ]

4、DLL & DllReference

针对第三方NPM包，这些包我们并不会修改它，但仍然每次都要在build的过程消耗构建性能，我们可以通过DllPlugin来前置这些包的构建，具体实例：webpack/webpack

Answer 2

Webpack 的话没啥好办法。

楼上给的办法都是针对打包后部署生产而言的，对开发阶段是没有帮助的。

你就比如压缩代码，压缩的目的是加快网络传输（即下载），本地调试的时候能有啥性能提升？跟热更新就更没关系了，反倒因为多了这一步会拖慢速度。

要不你别用 vue-cli （基于 Webpack）了，试试 Vite？

Answer 3

1. 如果你用的是动态路由懒加载，是否可以只加载你要开发的部分？
2. 给开发环境减负，把类似 babel 之类的操作暂停

没有类似的经历，不太确定怎么优化。

哦，好像可以在本地给 node.js 做一下性能分析，看看主要卡在哪个环节。

Answer 4

原因分析：随着页面路由的增多，需要编译的资源增多，编译时间必定要延长。
解决思路：减少页面路由，减少编译资源
实践：如果项目过大，可以按业务拆解为多页面应用，每个页面中包含有限的路由，开发编译的时候只编译修改的页面，其余业务模块不做变动。（经过实践的，因为我自己的项目就是这样做的）

Answer 5

规划多页面试试，各个页面互不影响，打包只打单独几个页面