javascript - Webpack 使用大型 ES6 模块构建性能缓慢

Question

对于我的 React 项目中的本地化，我使用自动生成的 ES6 模块，如下所示:

var Resources = new Array();
Resources['en-US']={};
Resources['en-US'].hello = 'Hello';
Resources['en-US'].welcome = 'Welcome';

.. snip ...

Resources['sv-SE']={};
Resources['sv-SE'].hello = 'Hej';
Resources['sv-SE'].welcome = 'Välkommen';

export default Resources;

Resources 数组包含大约 2500 个项目。

在我的 React 组件中，我使用资源模块，例如:

import React from 'react';
import Resources from '../Assets/Resources';

var Test = React.createClass({
    propTypes: {
        culture: React.PropTypes.string
    },

    render: function () {
        return (
            <div>{Resources[this.props.culture].hello</div>
        );
    }    
});

export default Test;

问题是当我使用 Webpack 捆绑项目时。构建时间约为 78 秒(78000 毫秒)，但增量构建速度很快(约 400 毫秒)。

如果我将资源数组剥离为更少量的项目(例如 10 个项目)，则构建时间将降至 7 秒(7000 毫秒)，这看起来更合理。

有人知道如何加快构建时间吗？

Answer 1

解决方案是将资源模块保留为 json 文件(如果数据不需要由 JavaScript 完成任何类型的计算)并使用适当的加载器 (json-loader) 。

通过这样做，webpack 不会将文件作为 JS 处理，因此构建时间应该更快。