在前端开发中，优化网站的加载速度是非常重要的一部分，而减少文件大小是其中的一个重点。本文将介绍一个可以自动化压缩 Webpack 打包输出文件的 npm 包 minified-webpack-plugin 的使用教程。
安装
在项目根目录下打开命令行，输入以下命令进行安装：
npm install minified-webpack-plugin --save-dev
使用
在 webpack.config.js 文件中引入该包：
const MinifiedWebpackPlugin = require("minified-webpack-plugin");然后在 plugins 配置项中添加该插件：
plugins: [ new MinifiedWebpackPlugin(), // 其他插件 ]
这里代码的正确添加方式是，在其他插件等 webpack 配置项后面添加 MinifiedWebpackPlugin 执行实例，确保代码能够正常运行。
配置
include
默认情况下，minified-webpack-plugin 会尝试压缩所有输出文件。但如果需要指定某些文件被压缩，可以使用 include 配置选项。
例如，只需要压缩 index.html 文件和 js/bundle.js 文件：
-- -------------------- ---- -------
-------- -
--- -----------------------
-------- -
-------------
----------------
-
---
-- ----
-exclude
反之，若要指定某些文件不被压缩，可以使用 exclude 配置选项。
例如，不需要压缩 vendor.js 文件：
plugins: [
new MinifiedWebpackPlugin({
exclude: [
/vendor.js/,
]
}),
// 其他插件
]algorithm
minified-webpack-plugin 默认使用 UglifyJs 压缩算法进行压缩，它是一种尽量缩小文件大小的算法。如果需要改用其他算法，可以使用 algorithm 配置选项。
例如，使用 lz-string 压缩：
plugins: [
new MinifiedWebpackPlugin({
algorithm: "lz-string",
}),
// 其他插件
]深入学习
想要深入学习如何优化 webpack 打包输出的小伙伴，可以试着手动压缩代码，然后对比压缩前后的代码来学习各种算法的优缺点。可以使用这个在线 JS 压缩器 来压缩代码，并通过《大话Web前端》、《JavaScript权威指南》等前端经典书籍学习代码优化的各种技巧。
示例代码
在这里提供一个简单的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- ------------------------
--
--结语
minified-webpack-plugin 是一款自动化压缩 Webpack 打包输出文件的 NPM 包，能够有效地提高网站的加载速度，也是前端性能优化的重要组成部分。通过本文的介绍，希望小伙伴们能够掌握该包的基本使用方法，并在日常开发中灵活应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67714