weixin_39892447
weixin_39892447
2021-01-07 04:09

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

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的配置文件:

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: {
          '': './src/assets',
          '': './src/components',
          '': './src/utils',
          '': './src/themes',
          '': './src/services',
          '': './src/utils/config',
          '': './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文件,把编译的进度和时间利用插件暴露出来。

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的时候: image imageCompiled successfully in 417.7s!

如上图,进度到72%的时候就停了好久也没有任何提示,在这之前编译都是很快的,然后build到75%,不是很明白这里为什么会进行build,查看编译的进度时发现node_module里的第三方依赖也进行了编译。

image 使用BundleAnalyzerPlugin插件查看编译出来的文件大小。

该提问来源于开源项目:sorrycc/roadhog

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

8条回答

  • weixin_39673742 weixin_39673742 4月前

    同问 编译的时候很慢

    点赞 评论 复制链接分享
  • weixin_39675289 weixin_39675289 4月前

    把大的几个库,预先编译好成lib库,用externals引入,优化编译,我是这么解决的。

    点赞 评论 复制链接分享
  • weixin_39900676 weixin_39900676 4月前

    太慢了,同问

    点赞 评论 复制链接分享
  • weixin_39892447 weixin_39892447 4月前

    太慢了,同问

    我现在是把roadhog干掉了,自己搭了一套webpack,编译速度提升了十几倍是有的。

    点赞 评论 复制链接分享
  • weixin_39900676 weixin_39900676 4月前

    求分享!

    点赞 评论 复制链接分享
  • weixin_39892447 weixin_39892447 4月前

    求分享! 看看这个对你有帮助么? https://github.com/404cat/blog/issues/1

    点赞 评论 复制链接分享
  • weixin_39900676 weixin_39900676 4月前

    感谢大佬

    点赞 评论 复制链接分享
  • weixin_39900676 weixin_39900676 4月前

    package.json 里面的scripts分享一下呢

    点赞 评论 复制链接分享

相关推荐