Webpack: после применения splitChunks у меня снова появляется предупреждение - PullRequest
Новая
       7

Webpack: после применения splitChunks у меня снова появляется предупреждение

0 голосов
/ 28 мая 2020

Это мой webpack.config.babel. js файл: 

// Import webpack module
import webpack from "webpack";
//Import path module
import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import dotenv from "dotenv";
import fs from "fs";

const devMode = process.env.NODE_ENV !== "production";

console.log("devMode: " + process.env.NODE_ENV);


/**
 * Code to get the values of environment variables during compilation time for the front-end
 */
//Get the root path. Our .env files and webpack.config.babel.js files are in the root path
const currentPath = path.join(__dirname);
const basePath = currentPath + "/.env";
// We're concatenating the environment name to our filename to specify the correct env file!
const envPath = basePath + "." + process.env.NODE_ENV;
// Check if the file exists, otherwise fall back to the production .env
const finalPath = fs.existsSync(envPath) ? envPath : basePath;
console.log("webpack.config.babel.js finalPath: " + finalPath);
// Set the path parameter in the dotenv config
const fileEnv = dotenv.config({ path: finalPath }).parsed;
// reduce it to a nice object, the same as before
const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
  prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
  return prev;
}, {});



module.exports = {
    entry: "./src/client/index.js", //set entry file

    // Resolve to output directory and set file
    output: {
        path: path.resolve("dist/assets"),
        filename: "js/[name].bundle.js",
        chunkFilename: "js/[name].bundle.js",
        publicPath: "/assets"   //It's mandatory to define this publicPath to get access to the website when we reload pages
                                //or we access to them directly with url's which have directories of second level like 
                                //http://localhost:4000/directory-level-1/directory-level-2
    },
    optimization: {
        splitChunks : {
            chunks: "all",
            minSize: 30000,
            maxSize: 100000,
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/client/index.html",    //where is our template
            filename: "../index.html",              //where we are going to put our index.html inside the output directory
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }            
        }),
        new MiniCssExtractPlugin({
            filename: "css/bundle.css",
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }             
        }),
        //With this entry we can get access to the environment variable for front-end
        new webpack.DefinePlugin(envKeys),
    ],
    //It help us to detect errors. 
    devtool: "source-map", 
    // Set dev-server configuration
    devServer: {
        inline: true,
        contentBase: './dist', 
        port: 3000,
        historyApiFallback: true
    },

    // Add babel-loader to transpile js and jsx files
    module: { 
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:[
                    { 
                        loader: "babel-loader",
                        query: {
                            presets: [
                                "@babel/preset-react"
                            ]
                        }
                    }
                ]
            },
            {
                use: [
                    devMode ? "style-loader" : MiniCssExtractPlugin.loader, 
                    "css-loader"],
                test: /\.css$/
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "saas-loader", 
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    publicPath: "/assets/images/",
                    outputPath: "./images/"
                }
            },
            {
                test: /\.(eot|ttf|woff|woff2)$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    publicPath: "/assets/fonts/",   //It's mandatory to get access to the fonts when we reload pages or access directly
                    outputPath: "./fonts/"
                }
            }
        ]
    },
};

И журнал, который у меня есть, когда я создаю код для внешнего интерфейса: 

basketmetrics3@1.0.0 compile /home/josecarlos/Workspace/nodejs/basketmetrics3
> NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress

Browserslist: caniuse-lite is outdated. Please run next command `npm update`
devMode: production
webpack.config.babel.js finalPath: /home/josecarlos/Workspace/nodejs/basketmetrics3/.env
Hash: 89371cce2b9a1f4dc981                                                                                                                                                              
Version: webpack 4.38.0
Time: 18241ms
Built at: 2020-05-28 11:38:32
                                     Asset       Size  Chunks             Chunk Names
                             ../index.html   4.29 KiB          [emitted]  
                         css/12.bundle.css   5.72 KiB      12  [emitted]  main~c4d3904e
                     css/12.bundle.css.map   7.89 KiB      12  [emitted]  main~c4d3904e
                         css/54.bundle.css    152 KiB      54  [emitted]  vendors~main~e41235fb
                     css/54.bundle.css.map    191 KiB      54  [emitted]  vendors~main~e41235fb
                         css/56.bundle.css   2.77 KiB      56  [emitted]  vendors~main~f9ca8911
                     css/56.bundle.css.map   3.56 KiB      56  [emitted]  vendors~main~f9ca8911
fonts/0a1ce4bd2f68c46725730d10762f050f.ttf   57.1 KiB          [emitted]  
fonts/575e4317521b381ac94c0c8207c81979.ttf    175 KiB          [emitted]  
fonts/580d0778ad254335be45bf58bb449f43.ttf    174 KiB          [emitted]  
fonts/a2c977bb9c9811e1b0e3eee168fbd913.ttf   56.3 KiB          [emitted]  
fonts/d08840599e05db7345652d3d417574a9.ttf    168 KiB          [emitted]  
fonts/dc466c6319df694a72360d9601596ef9.ttf   54.8 KiB          [emitted]  
                js/main~02be8cad.bundle.js   29.9 KiB       0  [emitted]  main~02be8cad
            js/main~02be8cad.bundle.js.map   52.7 KiB       0  [emitted]  main~02be8cad
                js/main~09bb5426.bundle.js   21.2 KiB       1  [emitted]  main~09bb5426
            js/main~09bb5426.bundle.js.map   49.8 KiB       1  [emitted]  main~09bb5426
                js/main~09eaa936.bundle.js   41.7 KiB       2  [emitted]  main~09eaa936
            js/main~09eaa936.bundle.js.map   65.1 KiB       2  [emitted]  main~09eaa936
                js/main~2202be32.bundle.js    134 KiB       3  [emitted]  main~2202be32
            js/main~2202be32.bundle.js.map    447 KiB       3  [emitted]  main~2202be32
                js/main~2faeff3f.bundle.js   51.4 KiB       4  [emitted]  main~2faeff3f
            js/main~2faeff3f.bundle.js.map    100 KiB       4  [emitted]  main~2faeff3f
                js/main~801e2957.bundle.js   43.9 KiB       5  [emitted]  main~801e2957
            js/main~801e2957.bundle.js.map   90.6 KiB       5  [emitted]  main~801e2957
                js/main~8d78bab2.bundle.js   51.9 KiB       6  [emitted]  main~8d78bab2
            js/main~8d78bab2.bundle.js.map   81.5 KiB       6  [emitted]  main~8d78bab2
                js/main~968a444c.bundle.js     49 KiB       7  [emitted]  main~968a444c
            js/main~968a444c.bundle.js.map    118 KiB       7  [emitted]  main~968a444c
                js/main~a5047cc6.bundle.js   35.5 KiB       8  [emitted]  main~a5047cc6
            js/main~a5047cc6.bundle.js.map   50.7 KiB       8  [emitted]  main~a5047cc6
                js/main~a85c8bbf.bundle.js   29.7 KiB       9  [emitted]  main~a85c8bbf
            js/main~a85c8bbf.bundle.js.map   56.6 KiB       9  [emitted]  main~a85c8bbf
                js/main~abdb67e0.bundle.js   48.4 KiB      10  [emitted]  main~abdb67e0
            js/main~abdb67e0.bundle.js.map   61.8 KiB      10  [emitted]  main~abdb67e0
                js/main~b5cb4aa8.bundle.js     29 KiB      11  [emitted]  main~b5cb4aa8
            js/main~b5cb4aa8.bundle.js.map   86.4 KiB      11  [emitted]  main~b5cb4aa8
                js/main~c4d3904e.bundle.js   32.5 KiB      12  [emitted]  main~c4d3904e
            js/main~c4d3904e.bundle.js.map   51.4 KiB      12  [emitted]  main~c4d3904e
                js/main~c66b9621.bundle.js     32 KiB      13  [emitted]  main~c66b9621
            js/main~c66b9621.bundle.js.map   58.6 KiB      13  [emitted]  main~c66b9621
                js/main~d3f54256.bundle.js   40.6 KiB      14  [emitted]  main~d3f54256
            js/main~d3f54256.bundle.js.map     98 KiB      14  [emitted]  main~d3f54256
                js/main~db67436b.bundle.js   45.2 KiB      15  [emitted]  main~db67436b
            js/main~db67436b.bundle.js.map   94.5 KiB      15  [emitted]  main~db67436b
                js/main~e2a1a646.bundle.js     30 KiB      16  [emitted]  main~e2a1a646
            js/main~e2a1a646.bundle.js.map   55.3 KiB      16  [emitted]  main~e2a1a646
                js/main~fc894998.bundle.js   33.1 KiB      17  [emitted]  main~fc894998
            js/main~fc894998.bundle.js.map   87.6 KiB      17  [emitted]  main~fc894998
        js/vendors~main~0436ed57.bundle.js   13.9 KiB      18  [emitted]  vendors~main~0436ed57
    js/vendors~main~0436ed57.bundle.js.map   72.5 KiB      18  [emitted]  vendors~main~0436ed57
        js/vendors~main~0928ebd2.bundle.js    103 KiB      19  [emitted]  vendors~main~0928ebd2
    js/vendors~main~0928ebd2.bundle.js.map    247 KiB      19  [emitted]  vendors~main~0928ebd2
        js/vendors~main~0cf2ab46.bundle.js   13.6 KiB      20  [emitted]  vendors~main~0cf2ab46
    js/vendors~main~0cf2ab46.bundle.js.map   68.4 KiB      20  [emitted]  vendors~main~0cf2ab46
        js/vendors~main~0d152872.bundle.js   37.4 KiB      21  [emitted]  vendors~main~0d152872
    js/vendors~main~0d152872.bundle.js.map    138 KiB      21  [emitted]  vendors~main~0d152872
        js/vendors~main~0f485567.bundle.js   23.9 KiB      22  [emitted]  vendors~main~0f485567
    js/vendors~main~0f485567.bundle.js.map    114 KiB      22  [emitted]  vendors~main~0f485567
        js/vendors~main~15d603ea.bundle.js   41.2 KiB      23  [emitted]  vendors~main~15d603ea
    js/vendors~main~15d603ea.bundle.js.map    152 KiB      23  [emitted]  vendors~main~15d603ea
        js/vendors~main~1c3a2c3f.bundle.js   22.4 KiB      24  [emitted]  vendors~main~1c3a2c3f
    js/vendors~main~1c3a2c3f.bundle.js.map    113 KiB      24  [emitted]  vendors~main~1c3a2c3f
        js/vendors~main~20e2ccca.bundle.js   17.3 KiB      25  [emitted]  vendors~main~20e2ccca
    js/vendors~main~20e2ccca.bundle.js.map   64.5 KiB      25  [emitted]  vendors~main~20e2ccca
        js/vendors~main~253ae210.bundle.js   14.2 KiB      26  [emitted]  vendors~main~253ae210
    js/vendors~main~253ae210.bundle.js.map   75.9 KiB      26  [emitted]  vendors~main~253ae210
        js/vendors~main~28014af5.bundle.js   23.4 KiB      27  [emitted]  vendors~main~28014af5
    js/vendors~main~28014af5.bundle.js.map    106 KiB      27  [emitted]  vendors~main~28014af5
        js/vendors~main~2fbb34c2.bundle.js   30.3 KiB      28  [emitted]  vendors~main~2fbb34c2
    js/vendors~main~2fbb34c2.bundle.js.map    132 KiB      28  [emitted]  vendors~main~2fbb34c2
        js/vendors~main~3a985ce4.bundle.js   28.5 KiB      29  [emitted]  vendors~main~3a985ce4
    js/vendors~main~3a985ce4.bundle.js.map   74.7 KiB      29  [emitted]  vendors~main~3a985ce4
        js/vendors~main~41983590.bundle.js   12.3 KiB      30  [emitted]  vendors~main~41983590
    js/vendors~main~41983590.bundle.js.map     57 KiB      30  [emitted]  vendors~main~41983590
        js/vendors~main~44621dc8.bundle.js   9.43 KiB      31  [emitted]  vendors~main~44621dc8
    js/vendors~main~44621dc8.bundle.js.map   45.2 KiB      31  [emitted]  vendors~main~44621dc8
        js/vendors~main~46e0dd6e.bundle.js   20.3 KiB      32  [emitted]  vendors~main~46e0dd6e
    js/vendors~main~46e0dd6e.bundle.js.map    101 KiB      32  [emitted]  vendors~main~46e0dd6e
        js/vendors~main~5244546d.bundle.js   31.6 KiB      33  [emitted]  vendors~main~5244546d
    js/vendors~main~5244546d.bundle.js.map    116 KiB      33  [emitted]  vendors~main~5244546d
        js/vendors~main~541cf30c.bundle.js   39.9 KiB      34  [emitted]  vendors~main~541cf30c
    js/vendors~main~541cf30c.bundle.js.map    139 KiB      34  [emitted]  vendors~main~541cf30c
        js/vendors~main~5737eb47.bundle.js   20.9 KiB      35  [emitted]  vendors~main~5737eb47
    js/vendors~main~5737eb47.bundle.js.map   92.8 KiB      35  [emitted]  vendors~main~5737eb47
        js/vendors~main~5c956a7a.bundle.js   25.9 KiB      36  [emitted]  vendors~main~5c956a7a
    js/vendors~main~5c956a7a.bundle.js.map    116 KiB      36  [emitted]  vendors~main~5c956a7a
        js/vendors~main~637b3a06.bundle.js   17.8 KiB      37  [emitted]  vendors~main~637b3a06
    js/vendors~main~637b3a06.bundle.js.map   89.6 KiB      37  [emitted]  vendors~main~637b3a06
        js/vendors~main~678f84af.bundle.js   32.4 KiB      38  [emitted]  vendors~main~678f84af
    js/vendors~main~678f84af.bundle.js.map    120 KiB      38  [emitted]  vendors~main~678f84af
        js/vendors~main~68d8c8c2.bundle.js   21.7 KiB      39  [emitted]  vendors~main~68d8c8c2
    js/vendors~main~68d8c8c2.bundle.js.map   78.7 KiB      39  [emitted]  vendors~main~68d8c8c2
        js/vendors~main~701f19e4.bundle.js   24.3 KiB      40  [emitted]  vendors~main~701f19e4
    js/vendors~main~701f19e4.bundle.js.map   89.2 KiB      40  [emitted]  vendors~main~701f19e4
        js/vendors~main~73914085.bundle.js   9.83 KiB      41  [emitted]  vendors~main~73914085
    js/vendors~main~73914085.bundle.js.map   47.8 KiB      41  [emitted]  vendors~main~73914085
        js/vendors~main~7a2ee6b6.bundle.js   14.7 KiB      42  [emitted]  vendors~main~7a2ee6b6
    js/vendors~main~7a2ee6b6.bundle.js.map     88 KiB      42  [emitted]  vendors~main~7a2ee6b6
        js/vendors~main~7d359b94.bundle.js   27.8 KiB      43  [emitted]  vendors~main~7d359b94
    js/vendors~main~7d359b94.bundle.js.map    116 KiB      43  [emitted]  vendors~main~7d359b94
        js/vendors~main~8ab0c962.bundle.js   34.9 KiB      44  [emitted]  vendors~main~8ab0c962
    js/vendors~main~8ab0c962.bundle.js.map    118 KiB      44  [emitted]  vendors~main~8ab0c962
        js/vendors~main~98431bb7.bundle.js   27.2 KiB      45  [emitted]  vendors~main~98431bb7
    js/vendors~main~98431bb7.bundle.js.map    114 KiB      45  [emitted]  vendors~main~98431bb7
        js/vendors~main~9acc357d.bundle.js   27.1 KiB      46  [emitted]  vendors~main~9acc357d
    js/vendors~main~9acc357d.bundle.js.map    119 KiB      46  [emitted]  vendors~main~9acc357d
        js/vendors~main~9c5b28f6.bundle.js   24.5 KiB      47  [emitted]  vendors~main~9c5b28f6
    js/vendors~main~9c5b28f6.bundle.js.map    132 KiB      47  [emitted]  vendors~main~9c5b28f6
        js/vendors~main~b5906859.bundle.js   40.2 KiB      48  [emitted]  vendors~main~b5906859
    js/vendors~main~b5906859.bundle.js.map     64 KiB      48  [emitted]  vendors~main~b5906859
        js/vendors~main~b790cc8c.bundle.js   27.3 KiB      49  [emitted]  vendors~main~b790cc8c
    js/vendors~main~b790cc8c.bundle.js.map    116 KiB      49  [emitted]  vendors~main~b790cc8c
        js/vendors~main~b8536e83.bundle.js   17.4 KiB      50  [emitted]  vendors~main~b8536e83
    js/vendors~main~b8536e83.bundle.js.map   58.7 KiB      50  [emitted]  vendors~main~b8536e83
        js/vendors~main~bed487d9.bundle.js   27.7 KiB      51  [emitted]  vendors~main~bed487d9
    js/vendors~main~bed487d9.bundle.js.map    108 KiB      51  [emitted]  vendors~main~bed487d9
        js/vendors~main~c16154f3.bundle.js   25.8 KiB      52  [emitted]  vendors~main~c16154f3
    js/vendors~main~c16154f3.bundle.js.map     98 KiB      52  [emitted]  vendors~main~c16154f3
        js/vendors~main~c37d664f.bundle.js   26.1 KiB      53  [emitted]  vendors~main~c37d664f
    js/vendors~main~c37d664f.bundle.js.map    104 KiB      53  [emitted]  vendors~main~c37d664f
        js/vendors~main~e41235fb.bundle.js  119 bytes      54  [emitted]  vendors~main~e41235fb
    js/vendors~main~e41235fb.bundle.js.map  111 bytes      54  [emitted]  vendors~main~e41235fb
        js/vendors~main~eea53fd7.bundle.js   32.3 KiB      55  [emitted]  vendors~main~eea53fd7
    js/vendors~main~eea53fd7.bundle.js.map    115 KiB      55  [emitted]  vendors~main~eea53fd7
        js/vendors~main~f9ca8911.bundle.js   12.8 KiB      56  [emitted]  vendors~main~f9ca8911
    js/vendors~main~f9ca8911.bundle.js.map   49.4 KiB      56  [emitted]  vendors~main~f9ca8911
        js/vendors~main~fc2f81ef.bundle.js   17.6 KiB      57  [emitted]  vendors~main~fc2f81ef
    js/vendors~main~fc2f81ef.bundle.js.map   76.7 KiB      57  [emitted]  vendors~main~fc2f81ef
Entrypoint main [big] = js/vendors~main~253ae210.bundle.js js/vendors~main~253ae210.bundle.js.map js/vendors~main~0f485567.bundle.js js/vendors~main~0f485567.bundle.js.map js/vendors~main~9acc357d.bundle.js js/vendors~main~9acc357d.bundle.js.map js/vendors~main~28014af5.bundle.js js/vendors~main~28014af5.bundle.js.map js/vendors~main~637b3a06.bundle.js js/vendors~main~637b3a06.bundle.js.map js/vendors~main~0436ed57.bundle.js js/vendors~main~0436ed57.bundle.js.map js/vendors~main~7a2ee6b6.bundle.js js/vendors~main~7a2ee6b6.bundle.js.map js/vendors~main~46e0dd6e.bundle.js js/vendors~main~46e0dd6e.bundle.js.map css/54.bundle.css js/vendors~main~e41235fb.bundle.js css/54.bundle.css.map js/vendors~main~e41235fb.bundle.js.map js/vendors~main~fc2f81ef.bundle.js js/vendors~main~fc2f81ef.bundle.js.map js/vendors~main~41983590.bundle.js js/vendors~main~41983590.bundle.js.map js/vendors~main~5c956a7a.bundle.js js/vendors~main~5c956a7a.bundle.js.map js/vendors~main~2fbb34c2.bundle.js js/vendors~main~2fbb34c2.bundle.js.map js/vendors~main~b5906859.bundle.js js/vendors~main~b5906859.bundle.js.map js/vendors~main~5244546d.bundle.js js/vendors~main~5244546d.bundle.js.map js/vendors~main~c16154f3.bundle.js js/vendors~main~c16154f3.bundle.js.map js/vendors~main~c37d664f.bundle.js js/vendors~main~c37d664f.bundle.js.map js/vendors~main~68d8c8c2.bundle.js js/vendors~main~68d8c8c2.bundle.js.map js/vendors~main~5737eb47.bundle.js js/vendors~main~5737eb47.bundle.js.map js/vendors~main~3a985ce4.bundle.js js/vendors~main~3a985ce4.bundle.js.map js/vendors~main~0d152872.bundle.js js/vendors~main~0d152872.bundle.js.map js/vendors~main~bed487d9.bundle.js js/vendors~main~bed487d9.bundle.js.map js/vendors~main~b790cc8c.bundle.js js/vendors~main~b790cc8c.bundle.js.map js/vendors~main~73914085.bundle.js js/vendors~main~73914085.bundle.js.map js/vendors~main~7d359b94.bundle.js js/vendors~main~7d359b94.bundle.js.map js/vendors~main~9c5b28f6.bundle.js js/vendors~main~9c5b28f6.bundle.js.map css/56.bundle.css js/vendors~main~f9ca8911.bundle.js css/56.bundle.css.map js/vendors~main~f9ca8911.bundle.js.map js/vendors~main~678f84af.bundle.js js/vendors~main~678f84af.bundle.js.map js/vendors~main~701f19e4.bundle.js js/vendors~main~701f19e4.bundle.js.map js/vendors~main~eea53fd7.bundle.js js/vendors~main~eea53fd7.bundle.js.map js/vendors~main~541cf30c.bundle.js js/vendors~main~541cf30c.bundle.js.map js/vendors~main~0cf2ab46.bundle.js js/vendors~main~0cf2ab46.bundle.js.map js/vendors~main~8ab0c962.bundle.js js/vendors~main~8ab0c962.bundle.js.map js/vendors~main~b8536e83.bundle.js js/vendors~main~b8536e83.bundle.js.map js/vendors~main~15d603ea.bundle.js js/vendors~main~15d603ea.bundle.js.map js/vendors~main~20e2ccca.bundle.js js/vendors~main~20e2ccca.bundle.js.map js/vendors~main~0928ebd2.bundle.js js/vendors~main~0928ebd2.bundle.js.map js/vendors~main~98431bb7.bundle.js js/vendors~main~98431bb7.bundle.js.map js/vendors~main~44621dc8.bundle.js js/vendors~main~44621dc8.bundle.js.map js/vendors~main~1c3a2c3f.bundle.js js/vendors~main~1c3a2c3f.bundle.js.map js/main~fc894998.bundle.js js/main~fc894998.bundle.js.map css/12.bundle.css js/main~c4d3904e.bundle.js css/12.bundle.css.map js/main~c4d3904e.bundle.js.map js/main~e2a1a646.bundle.js js/main~e2a1a646.bundle.js.map js/main~09bb5426.bundle.js js/main~09bb5426.bundle.js.map js/main~968a444c.bundle.js js/main~968a444c.bundle.js.map js/main~b5cb4aa8.bundle.js js/main~b5cb4aa8.bundle.js.map js/main~a5047cc6.bundle.js js/main~a5047cc6.bundle.js.map js/main~801e2957.bundle.js js/main~801e2957.bundle.js.map js/main~c66b9621.bundle.js js/main~c66b9621.bundle.js.map js/main~2faeff3f.bundle.js js/main~2faeff3f.bundle.js.map js/main~a85c8bbf.bundle.js js/main~a85c8bbf.bundle.js.map js/main~db67436b.bundle.js js/main~db67436b.bundle.js.map js/main~09eaa936.bundle.js js/main~09eaa936.bundle.js.map js/main~02be8cad.bundle.js js/main~02be8cad.bundle.js.map js/main~d3f54256.bundle.js js/main~d3f54256.bundle.js.map js/main~abdb67e0.bundle.js js/main~abdb67e0.bundle.js.map js/main~2202be32.bundle.js js/main~2202be32.bundle.js.map js/main~8d78bab2.bundle.js js/main~8d78bab2.bundle.js.map
 [11] ./node_modules/react-bootstrap/esm/index.js + 9 modules 19.5 KiB {40} [built]
      |    10 modules
 [18] ./src/client/css/content.css 39 bytes {12} [built]
 [52] ./node_modules/react-bootstrap/esm/Dropdown.js + 2 modules 7.52 KiB {23} [built]
      |    3 modules
[117] ./node_modules/react-bootstrap/esm/FormCheck.js + 2 modules 5.42 KiB {23} [built]
      |    3 modules
[131] ./node_modules/react-router-dom/esm/react-router-dom.js + 1 modules 31.2 KiB {31} [built]
      |    2 modules
[429] ./node_modules/react-bootstrap/esm/Modal.js + 3 modules 13.1 KiB {23} [built]
      |    4 modules
[431] ./node_modules/react-bootstrap/esm/Figure.js + 2 modules 1.61 KiB {23} [built]
      |    3 modules
[432] ./node_modules/react-bootstrap/esm/Navbar.js + 2 modules 5.88 KiB {25} [built]
      |    3 modules
[477] ./src/client/app.js 3.54 KiB {17} [built]
[479] ./src/client/css/header.css 39 bytes {12} [built]
[480] ./src/client/img/logo-basketmetrics-pink.png 11.3 KiB {12} [built]
[481] ./src/client/img/logo2.png 1.79 KiB {12} [built]
[843] ./src/client/css/footer.css 39 bytes {12} [built]
[845] ./src/client/index.css 39 bytes {12} [built]
[886] ./src/client/index.js 874 bytes {12} [built]
    + 947 hidden modules

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 (1.91 MiB)
      js/vendors~main~253ae210.bundle.js
      js/vendors~main~0f485567.bundle.js
      js/vendors~main~9acc357d.bundle.js
      js/vendors~main~28014af5.bundle.js
      js/vendors~main~637b3a06.bundle.js
      js/vendors~main~0436ed57.bundle.js
      js/vendors~main~7a2ee6b6.bundle.js
      js/vendors~main~46e0dd6e.bundle.js
      css/54.bundle.css
      js/vendors~main~e41235fb.bundle.js
      js/vendors~main~fc2f81ef.bundle.js
      js/vendors~main~41983590.bundle.js
      js/vendors~main~5c956a7a.bundle.js
      js/vendors~main~2fbb34c2.bundle.js
      js/vendors~main~b5906859.bundle.js
      js/vendors~main~5244546d.bundle.js
      js/vendors~main~c16154f3.bundle.js
      js/vendors~main~c37d664f.bundle.js
      js/vendors~main~68d8c8c2.bundle.js
      js/vendors~main~5737eb47.bundle.js
      js/vendors~main~3a985ce4.bundle.js
      js/vendors~main~0d152872.bundle.js
      js/vendors~main~bed487d9.bundle.js
      js/vendors~main~b790cc8c.bundle.js
      js/vendors~main~73914085.bundle.js
      js/vendors~main~7d359b94.bundle.js
      js/vendors~main~9c5b28f6.bundle.js
      css/56.bundle.css
      js/vendors~main~f9ca8911.bundle.js
      js/vendors~main~678f84af.bundle.js
      js/vendors~main~701f19e4.bundle.js
      js/vendors~main~eea53fd7.bundle.js
      js/vendors~main~541cf30c.bundle.js
      js/vendors~main~0cf2ab46.bundle.js
      js/vendors~main~8ab0c962.bundle.js
      js/vendors~main~b8536e83.bundle.js
      js/vendors~main~15d603ea.bundle.js
      js/vendors~main~20e2ccca.bundle.js
      js/vendors~main~0928ebd2.bundle.js
      js/vendors~main~98431bb7.bundle.js
      js/vendors~main~44621dc8.bundle.js
      js/vendors~main~1c3a2c3f.bundle.js
      js/main~fc894998.bundle.js
      css/12.bundle.css
      js/main~c4d3904e.bundle.js
      js/main~e2a1a646.bundle.js
      js/main~09bb5426.bundle.js
      js/main~968a444c.bundle.js
      js/main~b5cb4aa8.bundle.js
      js/main~a5047cc6.bundle.js
      js/main~801e2957.bundle.js
      js/main~c66b9621.bundle.js
      js/main~2faeff3f.bundle.js
      js/main~a85c8bbf.bundle.js
      js/main~db67436b.bundle.js
      js/main~09eaa936.bundle.js
      js/main~02be8cad.bundle.js
      js/main~d3f54256.bundle.js
      js/main~abdb67e0.bundle.js
      js/main~2202be32.bundle.js
      js/main~8d78bab2.bundle.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/client/index.html 2 KiB {0} [built]
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 1 hidden module

Все ок. На моем ноутбуке я могу получить доступ к интерфейсу и получить данные от внутреннего интерфейса. Но, похоже, размер "большой" из-за ПРЕДУПРЕЖДЕНИЯ.

Возможно ли, что это предупреждение появляется по сумме всех сгенерированных файлов? Это означает, что когда я получаю доступ к дому, например, все файлы загружаются?

Я предполагаю, что когда я получаю доступ к дому, будут загружены только необходимые файлы. Если я не ошибаюсь, то должен ли я игнорировать это ПРЕДУПРЕЖДЕНИЕ?

Несмотря на ограничения размера файлов, которые я установил в моем файле webpack.config.babel. js, минимум 30 КБ и максимум 100K, почему у меня есть такие файлы, как "js / main ~ 2202be32.bundle. js" размером больше 100K?

Или я что-то делаю не так? Как мне улучшить разделение, чтобы избежать этого ПРЕДУПРЕЖДЕНИЯ?

Я работаю с версией webpack 4.38.0.

1 Ответ

1 голос
/ 28 мая 2020

Возможно ли, что это предупреждение появляется по сумме всех сгенерированных файлов? Это означает, что когда я, например, обращаюсь к дому, все файлы загружаются?

Да, предупреждение сообщает вам, что объединенный размер всех ресурсов слишком велик :

ПРЕДУПРЕЖДЕНИЕ в ограничении размера точки входа: объединенный размер актива следующих точек входа превышает рекомендуемый предел

Он даже говорит, как это улучшить:

Вы можете ограничить размер ваших пакетов, используя import () или require.ensure для отложенной загрузки некоторых частей вашего приложения.

В одностраничном приложении вы можете ленивая загрузка некоторые js части.

В противном случае, независимо от того, сколько фрагментов вы создаете, любой посетитель должен загрузить их сразу при посещении вашего сайта.

Я думаю что когда я захожу в дом, будут загружены только необходимые файлы. Если я не ошибаюсь, то следует ли игнорировать это ПРЕДУПРЕЖДЕНИЕ?

Нет, загружается полная точка входа. Если вы хотите загружать только части вашего js, вам нужно разделить ваш js на несколько точек входа. Например, если у вас несколько файлов html, вы можете добавить точку входа для каждого файла. Таким образом, webpack может оптимизировать ваши пакеты.

...