对于我的 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 毫秒),这看起来更合理。
有人知道如何加快构建时间吗?
最佳答案
解决方案是将资源模块保留为 json 文件(如果数据不需要由 JavaScript 完成任何类型的计算)并使用适当的加载器 (json-loader
) 。
通过这样做,webpack 不会将文件作为 JS 处理,因此构建时间应该更快。
关于javascript - Webpack 使用大型 ES6 模块构建性能缓慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41997490/