打包后得到的文件大小为大webpack

Question

在捆绑css 和js 时出现错误。尽管捆绑后初始css 文件大小等于16 kb，但捆绑后CSS 文件太大最大为 438kb。

这里有一些警告，捆绑 cmd 后显示。

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
This can impact web performance.
Assets:
  style.css (448 kB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.
Entrypoints:
  main (456 kB)
      bundle.js
      style.css


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/

这是我的 webpack.config.js

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const NODE_ENV = process.env.NODE_ENV || "development";
const webpack = require("webpack");

const config = {
    entry: "./common.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename:"bundle.js"
    },
    // performance: {
    //  maxEntrypointSize:400000
    // },
    module: {
        rules: [
            {
                use:"babel-loader",
                test: /\.js$/,
            },
            {
                loader:ExtractTextPlugin.extract({
                    loader:"css-loader"
                    // options: {minimize:true}
                }),
                test: /\.css$/,

            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: [
                    {
                        loader:"url-loader"
                        // options:{ limit:40000 }
                    },
                    "image-webpack-loader"
                ]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("style.css")
    ]
};
if (NODE_ENV == "production") {
    config.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings:false,
                drop_console:true,
                unsafe:true
            }
        })
    );
}
module.exports = config;

Answer 1

你应该考虑分割你的块。为此有一个称为代码分割的概念。您应该阅读here 以了解更多信息。

在 webpack.config.js 中考虑这个

 new webpack.optimize.CommonsChunkPlugin({
      names: ['bundle', 'vendor', 'helper', 'react_libs', 'components'],
      minChunks: Infinity
    })

举个例子

module.exports = {
  context: sourcePath,
  entry: {
    main: './index.tsx',
    vendor: [
      'reactstrap',
      //
      'react-transition-group',
    ],
    helper: [
      'moment',
      //
      'fast-json-patch',
    ],
    react_libs: [
      'react',
      //
      'redux-actions',
    ],
    components: [
      'sweetalert-react',
      //,
      'react-sticky-el',
    ]
  },