Question

我决定从头开始构建一个反应应用程序（所有设置都需要），以便更好地了解幕后发生的事情（因为我们已经通过create-react-app设置了那些事情），一切都很好，但是捆绑大小真的很大（至少我认为是）

我设置了这样的应用：

这是我的配置：
webpack.common

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: ["babel-polyfill", path.join(__dirname, "./src/index.js")],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: {minimize: true}
                    }
                ]
            },
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.(pdf|jpg|png|gif|svg|ico)$/, use: 'url-loader'}
        ],
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        })
    ],
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

webpack.prod

const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = merge(common, {
    mode: 'production',
    devtool: 'source-map',
    plugins: [
        new UglifyJSPlugin({
            sourceMap: true
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        new CompressionPlugin()
    ]
});

这是我的输出

Hash: 19b5647860c66f778d8f
Version: webpack 4.12.0
Time: 75351ms
Built at: 2018-06-13 20:07:36
                 Asset       Size  Chunks                    Chunk Names
       vendors~main.js   3.07 MiB       0  [emitted]  [big]  vendors~main
               main.js    648 KiB       1  [emitted]  [big]  main
   vendors~main.js.map   6.51 MiB       0  [emitted]         vendors~main
           main.js.map    671 KiB       1  [emitted]         main
          ./index.html  255 bytes          [emitted]         
       ./index.html.gz  178 bytes          [emitted]         
        main.js.map.gz    476 KiB          [emitted]  [big]  
            main.js.gz    468 KiB          [emitted]  [big]  
    vendors~main.js.gz    967 KiB          [emitted]  [big]  
vendors~main.js.map.gz   1.76 MiB          [emitted]  [big]  
Entrypoint main [big] = vendors~main.js vendors~main.js.map main.js main.js.map
  [23] (webpack)/buildin/global.js 489 bytes {0} [built]
  [74] ./node_modules/redux-saga/es/internal/sagaHelpers/index.js + 4 modules 5.55 KiB {0} [built]
       |    5 modules
 [180] ./node_modules/react-router-dom/es/index.js + 30 modules 75.7 KiB {0} [built]
       |    31 modules
 [280] ./node_modules/react-redux/es/index.js + 23 modules 43 KiB {0} [built]
       |    24 modules
 [449] ./node_modules/redux-saga/es/index.js + 4 modules 30 KiB {0} [built]
       |    5 modules
 [471] ./src/client/modules/auth/redux/auth.saga.js 1.51 KiB {1} [built]
 [472] ./src/client/redux/sagas.js 938 bytes {1} [built]
 [473] ./src/client/modules/auth/redux/auth.reducer.js 925 bytes {1} [built]
 [474] ./src/client/redux/reducers.js 393 bytes {1} [built]
 [796] ./src/client/utils/themes.js 706 bytes {1} [built]
 [897] ./src/client/App.js 4.42 KiB {1} [built]
 [899] ./node_modules/css-loader!./src/index.css 435 bytes {1} [built]
 [900] ./src/index.css 1.05 KiB {1} [built]
 [908] ./src/index.js 1.29 KiB {1} [built]
[1111] multi babel-polyfill ./src/index.js 40 bytes {1} [built]
    + 1097 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  vendors~main.js (3.07 MiB)
  main.js (648 KiB)
  main.js.map.gz (476 KiB)
  main.js.gz (468 KiB)
  vendors~main.js.gz (967 KiB)
  vendors~main.js.map.gz (1.76 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (3.7 MiB)
      vendors~main.js
      main.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 159 bytes {0} [built]
Done in 84.75s.

Process finished with exit code 0

我错过了什么吗？我认为捆绑不应该那么大。在我的研究期间，我遇到了这个https://github.com/webpack/webpack/issues/6724 我正在使用新的fontawesome专业版，确实从我的应用程序中删除它减少了近2MB的捆绑...任何人都可以帮我这个？我没有想法！

提前致谢

Answer 1

我认为如果您已在fontawesome文件中导入了.js，那么webpack必须拥有所需的所有资产，包括css和webfonts。根据{{1}}的文档：

webpack依赖于ES2015模块语法的静态结构，即导入和导出

因此，当fontawesome为Tree Shaking时，所有这些资产必须为imported。在查看bundle fontawesome文件时，我发现它大小约为2MB。

因此，如果您想减少捆绑文件的大小，可以使用downloaded CDN并将其包含在fontawesome文件中，并带有index.html标记。在这种情况下，使用link模板

捆绑真正的大生产React应用程序

1 个答案: