Reactjs应用程序构建大小占用太多空间

Question

我在我的应用中使用了代码拆分来减少捆绑包的大小。在我的构建文件夹中，它包含20-30个块文件，并且每个块都有[name] .chunk.js.map占用太多空间。我们如何减少构建文件夹的大小。构建文件夹的总大小约为107 Mb。

代码拆分：

/**
 * AsyncComponent
 * Code Splitting Component / Server Side Rendering
 */
import React from 'react';
import Loadable from 'react-loadable';

// Abc page loader
import AbcPageLoader from '../AbcPageLoader/AbcPageLoader';

// dashboard
const AsyncDashboardComponent = Loadable({
    loader: () => import("../../routes/dashboard/dashboard-v1"),
    loading: () => <AbcPageLoader />,
});

// widgets
const AsyncWidgetsComponent = Loadable({
    loader: () => import("../../routes/widgets"),
    loading: () => <AbcPageLoader />,
});

export { AsyncDashboardComponent, AsyncWidgetsComponent  };

Answer 1

我在对webpack进行一些研究后解决了这个问题。由于源映射，包大小太大。我在webpack.prod.config.js中添加了GENERATE_SOURCEMAP = false并解决了这个问题。