Question

在React项目中使用Webpack 4，因此使用的NPM软件包很少，但是捆绑包的大小非常大-例如6MB。

我已阅读了Webpack 4文档，以了解如何缩小和构建可用于生产环境的捆绑包，但文件大小似乎并没有减少太多。

我也尝试过拆分捆绑包，但没有真正的成功。例如，试图将所有与React相关的软件包放入1个软件包中，但这会破坏Web应用程序-浏览器抛出错误，表明找不到软件包。我可能做错了！

因此，我正在寻求一些帮助，以改进构建设置并将文件拆分为较小的文件，并且通常会使事情变得更好。

我的Webpack 4配置文件：

"devDependencies": {
    "@types/file-saver": "^1.3.0",
    "@types/react": "^16.4.7",
    "autoprefixer": "^8.6.5",
    "axios-mock-adapter": "^1.15.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.6",
    "babel-jest": "^22.4.4",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-airbnb": "^2.5.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.2",
    "cross-env": "^5.2.0",
    "css-hot-loader": "^1.4.1",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-loader": "^2.1.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.10.0",
    "exports-loader": "^0.7.0",
    "file-loader": "^1.1.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "imports-loader": "^0.8.0",
    "jest": "^22.4.4",
    "jest-cli": "^22.4.4",
    "mini-css-extract-plugin": "^0.4.1",
    "moxios": "^0.4.0",
    "node-sass": "^4.9.2",
    "optimize-css-assets-webpack-plugin": "^4.0.3",
    "popper.js": "^1.14.3",
    "postcss-loader": "^2.1.6",
    "precss": "^3.1.2",
    "react-test-renderer": "^16.4.1",
    "redux-mock-store": "^1.5.3",
    "sass-loader": "^6.0.7",
    "sinon": "^5.1.1",
    "style-loader": "^0.20.3",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.2",
    "webpack-cli": "^2.1.5",
    "webpack-dev-server": "^3.1.5"
},
"dependencies": {
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.1.3",
    "classlist-polyfill": "^1.2.0",
    "core-js": "^2.5.7",
    "element-closest": "^2.0.2",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "fastclick": "^1.0.6",
    "file-saver": "^1.3.8",
    "font-awesome": "^4.7.0",
    "font-awesome-filetypes": "^1.2.0",
    "fs": "0.0.1-security",
    "jquery": "^3.3.1",
    "jwt-decode": "^2.2.0",
    "loaders.css": "^0.1.2",
    "lodash": "^4.17.10",
    "mailcheck": "^1.1.1",
    "mobile-drag-drop": "^2.3.0-rc.1",
    "mock-local-storage": "^1.0.5",
    "moment": "^2.22.2",
    "moment-range": "^4.0.1",
    "prop-types": "^15.6.2",
    "query-string": "^6.1.0",
    "raf": "^3.4.0",
    "react": "^16.4.1",
    "react-avatar": "^3.1.2",
    "react-block-ui": "^1.1.1",
    "react-confirm": "^0.1.17",
    "react-datepicker": "^1.5.0",
    "react-dom": "^16.4.1",
    "react-form-with-constraints": "^0.9.2",
    "react-hot-loader": "^4.3.4",
    "react-image": "^1.3.1",
    "react-loaders": "^3.0.1",
    "react-number-format": "^3.5.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-toastify": "^4.1.0",
    "reactstrap": "^5.0.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "sortablejs": "^1.7.0",
    "vanilla-autofill-event": "^1.0.3",
    "zxcvbn": "^4.4.2"
}

我的package.json文件：

{{1}}

Answer 1

开发包的大小并不重要，因为您在本地计算机上工作。重要的是应尽量减少生产捆绑。因为当您的应用上线时，它会使用生产捆绑包。因此，较小的捆绑包意味着托管平台提供的服务器将更快地发送生产资产。

在生产模式下，您安装的软件包将自动剥离库中包含的用于开发过程的许多内容。

**Minification**

Minification可以执行以下操作：删除空格，删除注释，删除不需要的分号，减少十六进制代码长度...

文件仍然是完全有效的代码。您不想尝试阅读或使用它，但是它没有违反任何规则。浏览器可以读取它并像使用原始文件一样使用它。

缩小仅改变文本，而文件压缩完全重写文件中的二进制代码。

  const TerserPlugin = require("terser-webpack-plugin");
  optimization:{
  minimize:true //this should be set
  minimizer:[new TerserPluign()]}

压缩生产中的资产

compression-webpack-plugin默认使用gzip算法。 Gzip是标准的，所有浏览器都可以理解。在webpack.prod-client.js

    `const CompressionPlugin = require("compression-webpack-plugin");

     plugins: [
          new CompressionPlugin(),
        ]`

这将压缩您的资产文件（“ jpeg”图像除外）。因为jpeg已经是压缩文件类型。

我们创建了gzip文件，但我们尚无法加载它们。因为在网络选项卡中，文件的内容类型应为gzip。我们需要更好的服务器配置。

   npm i express-static-gzip

   const expressStaticGzip = require("express-static-gzip");
   server.use(expressStaticGzip("dist")); //make sure you use this middleware first

我们以gzip格式下载文件，但浏览器使用的是未压缩版本。

Brotli是Google最初开发的另一种压缩算法，其压缩性能优于gzip。

  const BrotliPlugin = require("brotli-webpack-plugin");
  new BrotliPlugin(),
  server.use(expressStaticGzip("dist", { enableBrotli: true, orderPreference: ["br", "gzip"] }));

现在我们有了一组新文件：原始文件，gz版本和br版本甚至更小。

Webpack压缩将一次压缩文件-在构建过程中。然后将那些压缩版本保存到磁盘。然后，express-static-gzip可以提供那些预编译的版本，因此在请求时您不会受到gzipping的性能影响。如果Node.js直接响应您的HTTP请求并且您没有使用上游代理/负载均衡器，则此功能非常有用。

Webpack 4，React项目，捆绑包大小

1 个答案: