WebPACKのパッケージサイズを小さくする方法

Question

これは私のwebpack.dev.config.js私はこのように、webpack-dev-serverと開発にそれを実行するためにnpm startを使用

"use strict"; 
 
let webpack = require('webpack'); 
 
let path = require('path'); 
 
// let HtmlWebpackPlugin = require('html-webpack-plugin'); 
 
// let ExtractTextPlugin = require("extract-text-webpack-plugin"); 
 
const WebpackBrowserPlugin = require('webpack-browser-plugin'); 
 

 
const vendors = ['react', 'react-dom', 'react-router']; 
 
module.exports = { 
 
    devtool: 'cheap-eval-source-map', 
 
    devServer: { 
 
     port: 3001, 
 
     hot: true, 
 
     hotOnly: true, 
 
     inline: true, 
 
     watchContentBase: true, 
 
     watchOptions: { 
 
      poll: true 
 
     }, 
 
     contentBase: "./src", 
 
     compress: true, 
 
     historyApiFallback: true, 
 
     clientLogLevel: "none", 
 
     proxy: { 
 
      '/sms-web/*': { 
 
       target: 'http://localhost:9099', 
 
       changeOrigin: true, 
 
       secure: false 
 
      } 
 

 
     } 
 
    }, 
 
    entry: { 
 
     app: "./src/main.js", // 
 
     vendors: vendors //第三方库 
 
    }, //入口文件 
 
    output: { 
 
     path: path.join(__dirname, "src"), 
 
     publicPath: "", 
 
     filename: "[name].bundle.js" 
 
    }, 
 
    resolve: { 
 
     extensions: [".js", ".jsx", ".tsx", ".ts"] //resolve.extensions 用于指明程序自动补全识别哪些后缀, 
 
    }, 
 
    module: { 
 
     //各种加载器，即让各种文件格式可用require引用 
 
     rules: [{ 
 
      test: /\.js|jsx$/, 
 
      loader: "babel-loader", 
 
      exclude: "/node_modules/", 
 
      options: { 
 
       presets: ['es2015', 'react'] 
 
      } 
 
     }, { 
 
      test: /\.css$/, 
 
      exclude: "/node_modules/", 
 
      // loader: ExtractTextPlugin.extract("css-loader") 
 
      use: [ 
 
       { loader: "style-loader" }, 
 
       { loader: "css-loader" } 
 
      ] 
 

 
     }, { 
 
      test: /\.less$/, 
 
      use: [ 
 
       { loader: "style-loader" }, 
 
       { loader: "css-loader" }, 
 
       { loader: "less-loader" }, 
 
      ] 
 
     }, { 
 
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
 
      loader: "url-loader", 
 
      query: { 
 
       limit: 10000 
 
      } 
 
     }] 
 
    }, 
 
    plugins: [ 
 
     new webpack.HotModuleReplacementPlugin(), 
 
     new WebpackBrowserPlugin(), 
 
     new webpack.optimize.UglifyJsPlugin({ 
 
      compress: { 
 
       screw_ie8: true, 
 
       warnings: false 
 
      }, 
 
      mangle: { 
 
       screw_ie8: true 
 
      }, 
 
      output: { 
 
       comments: false, 
 
       screw_ie8: true 
 
      }, 
 
      except: ['$super', '$', 'exports', 'require'] //排除关键字 
 
     }), 
 
     new webpack.optimize.CommonsChunkPlugin({ 
 
      name: ['vendors'], 
 
      filename: "vendors.bundle.js", 
 
      minChunks: Infinity 
 
     }), 
 
    ] 
 
};

です：

 "start": "webpack-dev-server --config webpack.config.dev.js" 

しかし、同梱の場合

Version: webpack 2.3.3 
Time: 17035ms 
     Asset  Size Chunks     Chunk Names 
app.bundle.js 90 kB  0 [emitted]   app 
vendors.bundle.js 3.33 MB  1 [emitted] [big] vendors 
chunk {0} app.bundle.js (app) 33.5 kB {1} [initial] [rendered] 

ベンダーは3.33Mですので、reactでreact-dom.react-routerを使用してくださいまたは、それが正常であることを知りたい、または減らすべきことをしたいのですか？

Answer 1

プロダクションリリース用のバンドルのサイズを縮小する方法をお探しの場合は、マップ：開発中には便利ですが、バンドル内には多くのスペースが必要です。

バンドルサイズを最適化するもう1つの有用なWebpack機能は、追加の最適化を可能にする-pフラグです。

この2つの方法だけで、Reactアプリケーションのバンドルのサイズを8 MBからわずか1.22 MBに縮小できました。