随着前端开发的不断发展，页面中引入的 JS、CSS、图片等文件也越来越多，导致页面加载速度变慢，用户体验不佳。为此，我们需要使用工具来帮助我们减小打包后文件的大小，提高页面加载速度和用户体验。其中，Webpack 是我们比较常用的打包工具。在本文中，我们将介绍如何使用 Webpack 来减小打包后文件的大小。
了解 Webpack
Webpack 是一个模块打包工具。它是将多个模块打包成一个文件，以方便在浏览器中加载。Webpack 将所有资源视为模块，通过加载器（Loader）和插件（Plugin），可以将这些模块转换为浏览器可识别的形式，并优化资源请求和加载方式，减小文件大小。
压缩文件
首先，我们可以通过压缩文件来减小打包后文件的大小。Webpack 内置了一些插件来支持文件压缩，其中比较常用的是 UglifyJS Plugin。
在 webpack.config.js 中添加以下代码：
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
// ...
plugins: [
new UglifyJSPlugin()
]
}这样，Webpack 就会使用 UglifyJS Plugin 对所有 JS 文件进行压缩。
提取公共代码
在多个页面中，如果使用了相同的代码，我们可以将这些代码提取出来，减小打包后文件的大小。Webpack 提供了 CommonsChunkPlugin 插件，可以帮助我们提取公共代码。
在 webpack.config.js 中添加以下代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------------- -
------------ -
------- ------
-------- --
----- --------
-
-
-这样，所有的代码中相同的部分就会被提取出来形成一个 common.js 文件。
按需加载模块
在一些代码较多的页面中，为了提高页面加载速度，可以将某些模块改为按需加载。Webpack 支持使用 import() 方式实现按需加载。在需要按需加载的地方，可以这样写：
import(
/* webpackChunkName: "some-chunk-name" */
'./some-module.js'
).then(function(someModule) {
// 使用 someModule
}).catch(function(error) {
// 处理错误
});这里的 webpackChunkName 是自定义的名字，打包后会生成一个名为 some-chunk-name.js 的文件，用于按需加载。
使用文件名哈希
在开发中，如果我们修改了一个文件，那么它的哈希值也会随之改变。如果我们没有做任何处理，那么浏览器就会重新去加载文件，即使文件内容没有改变。为此，我们可以使用文件名哈希来解决这个问题。
在 webpack.config.js 中添加以下代码：
module.exports = {
// ...
output: {
filename: '[name].[chunkhash:8].js'
}
}这样，每次打包生成的文件名就会包含哈希值，如果文件内容没有改变，哈希值就不会变化，浏览器也不会重新下载文件。
总结
通过上面的介绍，我们可以了解到 Webpack 如何减小打包后文件的大小。我们可以通过压缩文件、提取公共代码、按需加载模块、使用文件名哈希等方式来优化页面加载速度和用户体验。不同的场景下，我们还可以进一步优化打包配置，以达到更好的效果。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645da444968c7c53b000c724