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毫秒）。

如果我将Resources数组剥离到少得多的项目（例如10个项目），则构建时间会缩短到7秒（7000ms），这似乎更合理。

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

Answer 1

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

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

Webpack使用大型ES6模块降低构建性能

1 个答案: