减少 webpack 打包文件大小的几种方法 | JS 秘籍
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
根据webpack 官方网站的介绍，webpack 是一个用于现代 JavaScript 应用的静态模块打包工具。当 webpack 处理你的应用时，它会在内部构建一个依赖关系图，该图映射了项目所需的每个模块，并生成一个或多个打包文件。
Webpack 可以与独立的任务运行器一起负责打包。然而，由于社区开发的 Webpack 插件，打包器和任务运行器之间的界限变得模糊不清。有时，这些插件会执行一些通常在 Webpack 之外完成的任务，例如清理构建目录或部署构建。
它主要是一个 JavaScript 模块打包工具，但也可以转换所有前端资源，例如 HTML、CSS 甚至图片。它可以让你更好地控制应用程序发出的 HTTP 请求数量，并允许你使用其他类型的资源（例如 Pug、Sass 和 ES8）。Webpack 还允许你轻松地使用 npm 上的包。
Webpack 是一个很棒的静态打包工具，适用于你的 JavaScript 应用程序，但是当 Webpack 打包后的文件大小增加时，情况可能会变得有点混乱，它会大大降低 JavaScript 应用程序的加载速度。
以下是一些可以有效减小 webpack 打包文件大小的好方法：
吊装
作用域提升采用了一种更智能的方式将模块添加到捆绑包中。
吊装作业可以做什么：
● 加快 JavaScript 在浏览器中的执行速度
● 可以减小打包文件的大小
我该怎么做？
在 webpack.config.js 文件的插件部分添加以下一行代码：
webpack.optimize.ModuleConcatenationPlugin()
不过，它需要 webpack 3 或更高版本。
在生产环境中使用 Webpack 4
这一点非常重要，因为在生产环境中使用 webpack 4 会自动移除所有不必要的空格、换行符等。它还可以告知某些包不要包含调试代码。
我该怎么做？
创建你的生产环境包，如下所示
webpack -p --mode=production
它的功能：
● 启用 UglifyJS 压缩
● 将 NODE_ENV 设置为生产环境
使用 LODASH-WEBPACK-PLUGIN
如果你在 JavaScript 项目中使用 lodash，不妨试试 lodash-webpack-plugin 这个插件。它可以移除你不需要的 lodash 功能，从而显著减小打包后的文件大小。
我该怎么做？
使用以下命令从 npm 安装依赖项
npm install lodash-webpack-plugin -save--dev
然后在 webpack.config.js 文件的顶部引入该模块：
LodashModuleReplacementPlugin = require(’lodash-webpack-plugin’);
在 webpack.config.js 文件的插件部分添加这行代码。
new LodashModuleReplacementPlugin
使用捆绑分析工具
webpack 生成的 bundle 文件无法直接读取。但借助 bundle 分析器，用户可以在交互式树状图中可视化输出的 bundle 文件。
我该怎么做？
有很多 webpack 打包分析工具。在我看来，以下两个是最好的：
● https://github.com/th0r/webpack-bundle-analyzer
● https://github.com/danvk/source-map-explorer
摇树
Tree shaking 是将死代码从代码包中移除的过程。死代码是指那些被导出但未被任何地方导入的代码。
我该怎么做？
1）使用 ES6 模块语法
请尽可能使用 ES6 模块，并按模块名称导入。例如：
import { connect } from ”react-redux”;
而不是：
import reactRedux from ”react-redux”;
2) 更新 .babel.rc 文件
在你的 babel 配置中添加 modules: false（通常在 . babel.rc 中）。
如果您使用的是 es2015 预设，它应该看起来像这样：
presets: [[”es2015", { ”modules”: false }] ]
如果您使用的是 babel-preset-env，那么它应该看起来像这样：
presets: [[”env”, { ”modules”: false }] ]
3) 请确保您使用的是 webpack 2 或更高版本。
代码分割
使用 webpack，您可以将整个打包文件拆分成许多较小的文件，并仅加载每个页面所需的文件包。您甚至可以异步加载文件包！
例如，如果您有一个模态框，那么您可以进行代码拆分，仅在用户点击打开模态框的按钮时才加载该模态框的代码。这会增加页面加载时间，因为在页面初始加载时不会加载任何模态框代码。
我该怎么做？
阅读更多关于代码分割工作原理的内容：
●代码分割
参考
● https://survivejs.com/webpack/what-is-webpack/
● https://www.sitepoint.com/beginners-guide-webpack-module-bundling/
● https://webpack.js.org/concepts
原文发表于 sheddynathan.me。
文章来源：https://dev.to/coder_blvck/possible-ways-to-reduce-your-webpack-bundle-size-js-secrets-550