使用 Webpack 插件解决打包后文件过大的问题
如果你曾经去过一些网站，那么你很可能已经体验到了加载时间很慢的情况，尤其是在移动网络情况下。文件过大是其中一个重要原因，也是可以通过 Webpack 插件来解决的。
在 Webpack 4 之前，在编写 Web 应用程序时，需要将所有代码手动拆分为不同的文件，以便最终文件大小对于浏览器而言不会过大。但是，现在的 Webpack 更加智能，它可以通过它自身提供的插件系统，自动分析和拆分代码，让你的 Web 应用程序更快地运行。
下面我们就使用 Webpack 插件，来解决打包后文件过大的问题。
Webpack 插件介绍
Webpack 插件是由 Webpack 自己的插件系统提供的，可以用它们来拓展功能和调整 Webpack 的内部行为。Webpack 插件通常是一个 JavaScript 对象，它有一个 apply 方法，接收一个 Webpack 实例对象的参数，它可以访问整个 Webpack 编译过程的状态。
而在这个过程中，我们可以使用 Webpack 插件来进行优化，以缩小文件大小，提高加载速度。接下来我们将会通过两种 Webpack 插件的使用来演示如何解决打包后文件过大的问题。
Mini CSS Extract Plugin
Mini CSS Extract Plugin 是一个 Webpack 插件，可以将 CSS 文件从 bundle.js 中提取出来，并单独放置在新的 CSS 文件中。这个插件在 CSS 文件比较大时，可以大大减小 bundle.js 文件体积。
使用方法：
1.安装 Mini CSS Extract Plugin：
npm install --save-dev mini-css-extract-plugin
2.在 webpack.config.js 中引用 Mini CSS Extract Plugin：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');3.在 webpack.config.js 中添加插件配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- ----------------------
-
--这样，可以在打包完成时，自动生成一个单独的 CSS 文件，并作为外部引入的方式加载。
Optimize CSS Assets Plugin
Optimize CSS Assets Plugin 是一个 Webpack 插件，它能够通过 cssnano 等工具，来处理和最小化 CSS 资源文件，以缩小文件体积。
使用方法：
1.安装 Optimize CSS Assets Plugin：
npm install --save-dev optimize-css-assets-webpack-plugin
2.在 webpack.config.js 中引用 Optimize CSS Assets Plugin：
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');3.在 webpack.config.js 中添加插件配置：
module.exports = {
optimization: {
minimizer: [
new OptimizeCSSAssetsPlugin({})
]
}
};这样，CSS 文件在打包过程中将被自动最小化。
总结
通过使用 Mini CSS Extract Plugin 和 Optimize CSS Assets Plugin 两种 Webpack 插件，我们能够很容易的解决 Web 应用程序打包后文件过大的问题。值得注意的是，这两个插件的使用还有许多其他功能和参数，可以根据实际需求做出更多定制化的配置。
希望这篇文章对你有帮助，加油！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5d565f6b2d6eab3150536