Fatal编程技术网
  • reactjs/
  • Reactjs 捆绑真正大的生产应用程序

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

reactjs webpack

Reactjs 捆绑真正大的生产应用程序,reactjs,webpack,bundle,font-awesome,bundling-and-minification,Reactjs,Webpack,Bundle,Font Awesome,Bundling And Minification,我决定从头开始构建react应用程序（所有设置都是必需的），以便更好地了解幕后的情况（例如，我们已经通过create react app设置了这些事情），一切都很好，但捆绑包的大小确实很大（至少我认为是这样） 我的应用程序设置如下： 这是我的配置： webpack.common const path = require('path'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const HtmlWebPackPl

我决定从头开始构建react应用程序（所有设置都是必需的），以便更好地了解幕后的情况（例如，我们已经通过
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'
        }
    }
};

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
webpack.prod

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'
        }
    }
};

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
这是我的输出

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'
        }
    }
};

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
我错过什么了吗？我觉得这个包裹不应该那么大。在我的研究中，我遇到了这个
我正在使用新的fontawesome pro，事实上从我的应用程序中删除它会减少捆绑包中的近2MB容量…有人能帮我吗？我没有主意了

提前谢谢

我想如果你已经在你的
.js
文件中导入了你的
字体
，那么网页包必须拥有它需要的所有资产，包括
css
和
webfont
。根据
网页
的文档：


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

因此，当导入
时，所有这些资产都必须是
捆绑的
。当查看下载的
文件时，我发现它的大小正好是2MB左右

因此，如果您想减小捆绑文件的大小，可以使用
fontawesome
CDN，并将其包含在带有
link
标记的
index.html
文件中。在本例中，使用
html网页包插件
模板


正如我所发布的，我认为这个问题与FontAwesome更相关，因为如果我没有弄错的话，不应该捆绑未使用的代码（树抖动），但FontAwesome为react实现的方式迫使所有东西都成为捆绑包的一部分。谢谢你的评论，我将尝试使用CDN。