cli3 保存热更新很慢，如何解决？

Question

项目大约有200多个vue文件，保存热更新时在70%这里等待时间大约10s左右，如何优化一下

vue.config.js

const appConfig = require('./config/index.js')

let path = require('path')

// 去console插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const ThemeColorReplacer = require('webpack-theme-color-replacer')

const forElementUI = require('webpack-theme-color-replacer/forElementUI')

function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  // 部署应用包时的基本 URL
  publicPath:
    process.env.VUE_APP_LOGOUT_URL === 'production' ? '/online/' : './',

  // 保存时lint代码
  lintOnSave: true,

  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,

  chainWebpack: config => {
    // 配置环境
    config.plugin('define').tap(args => {
      args[0]['process.env'].VUE_APP_LOGOUT_URL = JSON.stringify(
        process.env.VUE_APP_LOGOUT_URL
      )
      console.log(args[0])
      return args
    })
    // 设置别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@api', resolve('src/api/api'))
      .set('styles', resolve('src/assets/styles'))
  },

  configureWebpack: config => {
    // 为生产环境修改配置...
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        // 生产环境自动删除console
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            drop_debugger: true,
            drop_console: true
          },
          sourceMap: false,
          parallel: true
        })
      )
      // 警告 webpack 的性能提示
      Object.assign(config, {
        performance: {
          hints: 'warning',
          // 入口起点的最大体积
          maxEntrypointSize: 50000000,
          // 生成文件的最大体积
          maxAssetSize: 30000000,
          // 只给出 js 文件的性能提示
          assetFilter: function (assetFilename) {
            return assetFilename.endsWith('.js')
          }
        }
      })
    }
    config.plugins.push(
      // 生成仅包含颜色的替换样式（主题色等）
      new ThemeColorReplacer({
        fileName: 'css/theme-colors.[contenthash:8].css',
        matchColors: [
          ...forElementUI.getElementUISeries(appConfig.themeColor) // element-ui主色系列
        ],
        changeSelector: forElementUI.changeSelector,
        isJsUgly: config.isBuild
        // resolveCss(resultCss) { // optional. Resolve result css code as you wish.
        //     return resultCss + youCssCode
        // }
      })
    )
  },
  // 本地代理
  devServer: {
    port: 8001,
    open: true,
    proxy: {
      '/erp': {
        target: process.env.VUE_APP_LOGOUT_URL,
        changOrigin: true,
        pathRewrite: {
          '^/erp': '/erp'
        }
      },
      '/scm': {
        target: process.env.VUE_APP_LOGOUT_URL,
        changOrigin: true,
        pathRewrite: {
          '^/scm': '/scm'
        }
      }
    }
  }
}

Answer 1

解决方式：
1.添加 syntax-dynamic-import 插件：

npm install --save-dev @babel/plugin-syntax-dynamic-import

2.在.babelrc文件中配置：

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

3.路由使用命名chunk

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

重启项目，保存热更新2-4s左右，解决此问题