如何降低的WebPack包装尺寸

这是我webpack.dev.config.js 如何降低的WebPack包装尺寸

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

厂商是3.33M，只要使用反应，反应-dom.react路由器在售货或者，我想知道这是正常的，或者我应该做些什么来减少

来源

2017-04-13 郭先生

你的配置不会有太大的帮助，可以分享webpack状态转储吗？ 'webpack --profile --json> stats.json'，然后上传stats.json。你也可以使用https://github.com/th0r/webpack-bundle-analyzer工具截取你的包的大小映射，并在这里分享。 – hazardous

我尝试这种方式，它有251个模块。为什么这么大 –

请按照指示提供stats.json。 – hazardous

如果您正在寻找一种方法来缩减生产版本的捆绑包的大小，我的建议是关闭源代码，地图：虽然它们在开发过程中很有用，但它们在捆绑中占据了很多空间。

优化包大小的另一个有用的webpack功能是-p标志，它启用了额外的优化。

仅凭这两种做法，我就可以将我的捆绑包的大小从〜8 MB减少到React应用程序的1.22 MB。

来源

2017-04-13 06:32:24

你的意思是'webpack-dev-server -p'？以及如何关闭源地图 –

您无需启动服务器即可构建一个包。你可以简单地做一些类似'''webpack -p'''的事情，并且这个包会被生成。要禁用源映射，您可以将''''''''传递给您的devtools：'''选项。你可以以编程的方式做到这一点（也许使用环境变量，如果你想在Heroku上构建应用程序，则需要使用环境变量）或手动执行此操作。 –

如何降低的WebPack包装尺寸

回答

相关问题