前言
在前端开发中，webpack 已经成为了不可或缺的工具之一。它可以帮助我们自动化打包、压缩、优化代码等，提高开发效率和网站性能。在开发过程中，我们通常会使用 webpack-dev-server 来进行开发，但是在生产环境中，我们需要对打包后的代码进行优化。本文将介绍一些 webpack 打包 production 环境时的优化思路，以及具体实现方式。
代码分离
代码分离是优化打包后的代码的一个重要手段。它可以将代码分成多个文件，从而减少每个文件的大小，加快页面加载速度。webpack 提供了多种代码分离的方式，包括入口起点、动态导入、SplitChunksPlugin 等。其中，使用 SplitChunksPlugin 可以将公共代码提取到一个单独的文件中，避免重复加载，从而提高网站的性能。
下面是一个使用 SplitChunksPlugin 进行代码分离的示例：
-- -------------------- ---- -------
-------------- - -
-----
------------- -
------------ -
------- ------
----- --------
-
-
--上面的代码中，我们使用了 optimization.splitChunks 配置项来进行代码分离。其中，chunks: 'all' 表示将所有的公共模块提取到单独的文件中，name: 'common' 表示将提取出来的文件命名为 common。
代码压缩
代码压缩是优化打包后的代码的另一个重要手段。它可以将代码中的空格、注释、多余的代码等无用信息去掉，从而减小文件的大小，加快页面加载速度。webpack 提供了多种代码压缩的方式，包括 UglifyJsPlugin、TerserPlugin 等。
下面是一个使用 TerserPlugin 进行代码压缩的示例：
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
//...
optimization: {
minimizer: [new TerserPlugin()]
}
};上面的代码中，我们使用了 optimization.minimizer 配置项来进行代码压缩。其中，new TerserPlugin() 表示使用 TerserPlugin 进行代码压缩。
静态资源处理
在生产环境中，我们通常会对静态资源进行处理，包括图片压缩、字体打包、CSS 提取等。webpack 提供了多种处理静态资源的方式，包括 file-loader、url-loader、image-webpack-loader 等。
下面是一个使用 image-webpack-loader 进行图片压缩的示例：
-- -------------------- ---- -------
-------------- - -
-----
------- -
------ -
-
----- -----------------------
---- -
-
------- --------------
-------- -
----------- --------
-
--
-
------- -----------------------
-------- -
-------- -
------------ -----
-------- --
--
-------- -
-------- ------
--
--------- -
-------- ------ -----
------ -
--
--------- -
----------- ------
--
----- -
-------- --
-
--
--
--
--
--
--
--上面的代码中，我们使用了 image-webpack-loader 对图片进行压缩。其中，options 中的各个参数可以根据需求进行配置。
缓存处理
在生产环境中，我们通常会对打包后的代码进行缓存处理，从而减少服务器的负载，提高网站的性能。webpack 提供了多种缓存处理的方式，包括 hash、chunkhash、contenthash 等。
下面是一个使用 contenthash 进行缓存处理的示例：
module.exports = {
//...
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
},
};上面的代码中，我们使用了 [contenthash] 来进行缓存处理。每次打包后，只有文件内容发生改变，才会生成一个新的文件名。这样就可以避免浏览器缓存旧的文件，提高网站的性能。
总结
本文介绍了 webpack 打包 production 环境时的一些优化思路，包括代码分离、代码压缩、静态资源处理、缓存处理等。这些优化手段可以帮助我们提高网站的性能，提高用户体验。希望本文能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6636e5a9d3423812e450051c