如何最小化webpack包的大小?

reactjs React.js

StafanNearPro

2020-03-19

我正在使用reactwebpack作为模块捆绑程序编写一个Web应用程序jsx到目前为止,我的代码还很轻巧,整个文件夹的大小为25 kb。

bundle.js创建的webpack虽然是2.2 mb。使用-p标志运行优化后,它将捆绑包减少到700kb,这仍然非常大。

我已经查看了react.min.js文件,文件大小为130kb。

Webpack是否可能产生如此大的文件,或者我做错了什么?

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './public/components/main.jsx',
  output: {
    path: __dirname + "/public",
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    }, {
      test: /\.css$/,
      loader: "style!css"
    }]
  }
};

编辑

package.json:

{
  "name": "XChange",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "main": "./bin/www",
  "devDependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0",
    "react-dom": "~0.14.3",
    "react": "~0.14.3",
    "webpack": "~1.12.9",
    "babel-loader": "~6.2.0",
    "babel-core": "~6.2.1",
    "babel-preset-react": "~6.1.18",
    "babel-preset-es2015": "~6.1.18",
    "react-bootstrap": "~0.28.1",
    "material-ui": "~0.14.0-rc1",
    "history": "~1.13.1",
    "react-router": "~1.0.2",
    "style-loader": "~0.13.0",
    "css-loader": "~0.18.0"
  },
  "dependencies": {
    "express-validator": "~2.18.0",
    "mongoose": "~4.2.9",
    "kerberos": "~0.0.17",
    "bcrypt": "~0.8.5"
  }
}

第2324篇《如何最小化webpack包的大小?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
LJinJin 2020.03.19

您是否看过脚本是如何通过网络发送的?我有一些非常简单的react组件,每个组件的大小约为300kb,这是在webpack优化之后进行的。将它们压缩后,它们下降到38kb。仍然相当可观-但这就是我们今天使用明天的功能所获得的。如果您正在使用node / express提供静态资源(包括您的javascript),请查看压缩(https://github.com/expressjs/compression)。我还建议查看生产的节点最佳实践指南https://expressjs.com/en/advanced/best-practice-performance.html如果您不是通过节点提供文件,则使用apache(或其他网络服务器)将具有用于压缩基于文本的文件的选项。

ProSam 2020.03.19

我发现提及source-map-explorer实用程序很有用,该实用程序有助于了解bundle.js文件中的确切内容。它可以帮助您识别bundle js中是否有不必要的东西。您可以从npm安装source-map-explorer并像

source-map-explorer yourBundle.js

除此之外,如@kimmiju所述,请检查您的服务器是否正在使用某种压缩方式。

Chrome中的“网络”标签

您还可以尝试异步加载路由(在webpack中延迟加载),这样就不会一次性发送整个bundlejs文件,而是在用户导航到这些路由时以成块发送。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android