Question

我正在使用React + Redux + Webpack，但每次重新运行节点服务器时都会遇到恼人的开发经验（使用JetBrains WebStorm），webpack需要2.5分钟才能将所有内容整合在一起。

我尝试了所有可能的技术，使webpack 初始构建更快，但没有成功。运行它需要2.5分钟。

我试过了：

Babel caching
Webpack模块分析器
不包括node_modules

这是我的webpack.config.js文件：

let path = require('path')
let webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

let entry = {
    bundle: './src/index',
    vendor: [
        'react',
        'react-dom',
        'redux',
        'react-redux',
        'react-router',
        'react-router-dom',
        'react-router-redux',
        'redux-thunk',
        'd3',
        'immutable',
        'moment',
        'axios',
        'openlayers',
        'react-table',
        'react-select',
        'reselect'
    ]
}

let plugins = [
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(ENV === 'prod' ? 'production' : 'development'),
            API_URL: JSON.stringify(API_URL),
            BASIC: JSON.stringify(BASIC)
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        beautify: false,
        comments: false,
        compress: {
            sequences   : true,
            booleans    : true,
            loops       : true,
            unused      : true,
            warnings    : false,
            drop_console: true,
            unsafe      : true
        }
    })
]

const config = {
    entry: entry,
    cache: true,
    devtool: 'cheap-module-source-map',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    plugins: plugins,
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
            },
            {
                test: /\.js$/,
                loader: 'babel-loader?cacheDirectory',
                query: {
                    plugins: ['transform-runtime']
                },
                include: [path.resolve(__dirname, "src")],
                exclude: /node_modules/
            },
            {
                test: /\.(css|less)$/,
                use: ['style-loader', 'css-loader', 'less-loader', 'postcss-loader']
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
                    `image-webpack-loader?${JSON.stringify(query)}`
                ]
            },
            {
                test: /\.(eot|woff|woff2|ttf)$/,
                loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
            }
        ]
    }
}

module.exports = config

这是我的package.json文件：

{
  "name": "Aloha",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "start-debug": "node $NODE_DEBUG_OPTION server.js",
    "build": "webpack",
    "test": "jest --verbose",
    "test:watch": "npm test -- --watch",
    "test-coverage": "jest --coverage",
    "webpack-stats": "webpack --profile",
    "startwatch": "nodemon server.js"
  },
  "author": "Aloha",
  "license": "ISC",
  "devDependencies": {
    "@amcharts/amcharts3-react": "^3.0.0",
    "babel-core": "^6.11.4",
    "babel-eslint": "^8.0.3",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "css-loader": "^0.28.4",
    "eslint": "^4.12.1",
    "eslint-loader": "^1.4.1",
    "eslint-plugin-react": "^7.0.1",
    "file-loader": "^1.1.5",
    "image-webpack-loader": "^3.3.1",
    "less": "^2.7.1",
    "less-loader": "^4.0.5",
    "postcss-loader": "^2.0.9",
    "redux-mock-store": "^1.2.1",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-dev-middleware": "^1.10.2",
    "webpack-hot-middleware": "^2.12.1"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "babel-preset-es2017": "^6.24.1",
    "body-parser": "^1.17.2",
    "classnames": "^2.2.5",
    "compression": "^1.6.2",
    "connect-multiparty": "^2.0.0",
    "cookie-parser": "^1.4.3",
    "d3": "^4.3.0",
    "dotenv": "^4.0.0",
    "express": "^4.15.3",
    "history": "^4.7.2",
    "http-proxy-middleware": "^0.17.4",
    "immutable": "^3.8.1",
    "lodash": "^4.17.4",
    "moment": "^2.14.1",
    "moment-timezone": "^0.5.13",
    "nodemon": "^1.12.1",
    "openlayers": "^4.5.0",
    "prop-types": "^15.5.10",
    "querystring": "^0.2.0",
    "rc-collapse": "^1.7.5",
    "react": "^16.2.0",
    "react-block-ui": "^1.1.1",
    "react-datetime": "^2.8.6",
    "react-dom": "^16.2.0",
    "react-imageloader": "^2.1.0",
    "react-notification-system": "^0.2.15",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.8",
    "react-select": "^1.0.0-rc.5",
    "react-table": "^6.7.4",
    "react-tabs": "^2.1.1",
    "redux": "^3.7.2",
    "redux-thunk": "^2.1.0",
    "request": "^2.74.0",
    "reselect": "^3.0.1",
    "webpack": "^3.9.1"
  }
}

帮助将深表感谢！

Answer 1

老实说，这并不令人惊讶。这很大程度上取决于代码和机器的复杂性。我的项目在高端iMac上花了大约1分15秒。

就个人而言，如果您是开发新手，创建反应应用仍然是一个很好的起点，因为它有热重新加载。使用webpack手表或类似的东西，以便您在开发时看到更新。

更改后应该没有理由重新运行节点服务器。重新运行节点的唯一时间是部署时。

Answer 2

您可以在webpack dev服务器中连接，我确信使用concurrently可以找到解决方案

在package.json中，连接"dev":"concurrently \"npm run server\" \"npm run client\""

其中"server":"nodemon index.js"和"client":"webpack-dev-server ..."。

我没有测试过这个确切的设置，但是在创建反应应用程序时使用它，其中客户端只是

npm run start --prefix client

Answer 3

这很大程度上取决于您的机器。确保您的项目有足够的磁盘空间和良好的处理器。除此之外，为了进行更多改进，您可以查看link。

缓慢的初始webpack构建

3 个答案: