修改文件编译一次要10分钟以上

404cat commented 5 years ago

Environment(required) | 环境（必填）

roadhog version（roadhog版本）1.1.2
Nodejs and Npm version（Nodejs 和 Npm 版本）11+， npm v.6.5
Operating environment (e.g. OS name) and its version（操作系统版本）: win10

What did you do? Please provide steps to re-produce your problem.（请提供复现步骤）

新接手了一个react+dva+roadhog配置的项目；开启yarn start后需要7分钟（有时候20分钟+）以上才能打开浏览器开启项目，然后修改文件编译每次都要6分钟以上，对开发来说是致命性的；因为是刚接手的，对dva和roadhog也不太熟悉，之前同事的交接文档上说可能是某个第三方依赖升级后出现编译缓慢的情况。所以想问能够在.roadhogrc.js文件中添加什么插件能够找出是哪个依赖造成的编译问题呢？把dva和roadhog的issuse都看了一遍也没有找到有什么方法（主要是小弟太菜了），希望有大佬能指点指点；或者能够自己配置webpack而不适用roadhog脚手架么？

What do you expected?（预期的正常效果）

期望能提高项目编译速度；

.roadhogrc.js的配置文件：

const { baseURL, rapMockURL, publicPath } = require('./src/utils/config')
const CONFIG_ENV = process.env.CONFIG_ENV
const PROXY_URL = process.env.PROXY_URL
const THEME = process.env.THEME

module.exports = {
  publicPath,
  entry: './src/index.js',
  theme: './theme.config.js',
  hash: true,
  autoprefixer: {
    browsers: ['> 20%', 'ie 9-11', 'not ie <= 8'],
  },
  proxy: {
    [baseURL]: {
      target: PROXY_URL,
      changeOrigin: true,
      secure: false,
      pathRewrite: {
        [baseURL]: '/aek-mspp',
      },
    },
    [rapMockURL]: {
      target: 'http://192.168.3.152',
      changeOrigin: true,
      pathRewrite: {
        [rapMockURL]: '/',
      },
    },
  },
  extraBabelPlugins: [
    'transform-runtime',
    'recharts',
    'lodash',
    [
      'module-resolver',
      {
        alias: {
          '@assets': './src/assets',
          '@components': './src/components',
          '@utils': './src/utils',
          '@themes': './src/themes',
          '@services': './src/services',
          '@config': './src/utils/config',
          '@shared': './src/shared',
        },
      },
    ],
  ],
  env: {
    development: {
      extraBabelPlugins: ['dva-hmr', ['import', { libraryName: 'antd', style: true }]],
    },
    production: {
      extraBabelPlugins: [['import', { libraryName: 'antd', style: true }]],
    },
  },
  define: {
    'process.env': {},
    'process.env.NODE_ENV': process.env.NODE_ENV,
    'process.env.CONFIG_ENV': CONFIG_ENV,
    'process.env.THEME': process.env.THEME,
  },
}

尝试的解决办法： 1、在项目根目录创建了webpack.config.js文件，把编译的进度和时间利用插件暴露出来。

// 终端输出进度条
const WebpackBar = require('webpackbar')
// 显示编译时间
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const chalk = require('chalk');

module.exports = function (webpackConfig, env) {
  webpackConfig.plugins.push(
    new ProgressBarPlugin({
      format:
        'build [:bar]' +
            chalk.green.bold(':percent') +
            ' (:elapsed seconds)'
    }),
    new WebpackBar(),
  )
  return webpackConfig
}

使用yarn start的时候： Compiled successfully in 417.7s!