javascript - 减少 React js 包大小

Question

在生产和在线部署中，我注意到我的应用程序包很大，因此需要很长时间才能结束加载。我正在尝试使用razzle.config.js.

npm start我收到此错误：

> my-razzle-app@4.0.4 start /Applications/MAMP/htdocs/xchanger-fontend-user
> razzle start

If you have issues with css make sure postcss resolves to v8.2.4.
See: https://razzlejs.org/getting-started#common-problems

CssMinimizerPlugin currently uses clean-css,
we will switch to cssnano once it supports postcss v8.2.4.

 WAIT  Compiling...

Bitcko-Mac:xchanger-fontend-user

到目前为止我的代码：

  module.exports = {
      plugins: ['scss'],
      modifyWebpackConfig(opts) {
        const config = opts.webpackConfig;
        // add loadable webpack plugin only
        // when we are building the client bundle
        if (opts.env.target === "web") {
          const filename = path.resolve(__dirname, "build");
          // saving stats file to build folder
          // without this, stats files will go into
          // build/public folder
          config.plugins.push(
            new LoadableWebpackPlugin({
              outputAsset: false,
              writeToDisk: { filename },
            })
          );
          config.plugins(new webpack.DefinePlugin({ // <-- key to reducing React's size
            'process.env': {
              'NODE_ENV': JSON.stringify('production')
            }
          }));
          config.plugins.push(new webpack.optimize.AggressiveMergingPlugin());
          config.plugins.push(new webpack.optimize.UglifyJsPlugin());
          config.plugins.push(new CompressionPlugin({ 
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.scss$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
          }));
        }
        return config;
      },

};

有什么建议么？

标签： javascriptnode.jsreactjswebpack