如何減少webpack包裝尺寸

Question

這是我的webpack.dev.config.js

 "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 }), ] }; 

我使用npm start在webpack-dev-server開發環境中運行它，如下所示：

       "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]

供應商是333萬，只在供應商中使用react，react-dom.react-router，我想知道它是正常的還是應該做一些減少的事情

Answer 1

如果您正在尋找一種減小生產版本捆綁包大小的方法，我的建議是您關閉源映射：盡管它們在開發過程中很有用，但它們會占用捆綁包內的大量空間。

用於優化捆綁包大小的另一個有用的Webpack功能是-p標志，它可以進行額外的優化。

僅通過這兩種做法，我就可以將React應用程序的包大小從〜8 MB減少到僅1.22 MB。