在使用 Webpack 5 时，优化构建以减少生成文件的体积是提升前端性能的重要一步。以下是一些常见的优化方法和策略：
1. 开启生产模式
确保构建时使用生产模式，Webpack 会自动应用多种优化（如代码压缩、Tree Shaking 等）：
webpack --mode production
或在配置文件中明确设置：
module.exports = {
mode: 'production',
};
2. 启用 Tree Shaking
Tree Shaking 是 Webpack 内置功能，用于删除未使用的代码。确保以下条件满足：
- 模块使用 ES6 模块（
import/export）：
import { usedFunction } from './module';
在生产模式下，Webpack 会自动开启 Tree Shaking，无需额外配置。
3. 压缩 JavaScript 和 CSS
Webpack 5 内置了 TerserPlugin 来压缩 JavaScript：
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};
压缩 CSS 时可以使用 css-minimizer-webpack-plugin：
npm install css-minimizer-webpack-plugin --save-dev
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [
'...',
new CssMinimizerPlugin(),
],
},
};
4. 分离第三方库（代码分割）
利用 Webpack 的 SplitChunksPlugin 将第三方库单独打包，避免重复加载：
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
通过动态导入（import()）进一步减少初始加载文件：
// 动态导入模块，仅在需要时加载
import('./largeModule').then((module) => {
module.default();
});
5. 移除未使用的 CSS
使用工具如 purgecss-webpack-plugin 删除未被使用的 CSS：
npm install purgecss-webpack-plugin glob --save-dev
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const path = require('path');
module.exports = {
plugins: [
new PurgeCSSPlugin({
paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
}),
],
};
6. 优化图片资源
使用 image-minimizer-webpack-plugin 来压缩图片：
npm install image-minimizer-webpack-plugin imagemin imagemin-mozjpeg imagemin-pngquant --save-dev
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
plugins: [
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: [
['mozjpeg', { quality: 75 }],
['pngquant', { quality: [0.65, 0.9] }],
],
},
},
}),
],
};
7. 减少 Polyfill 和第三方库体积
- 按需引入：仅引入所需的模块，例如 lodash 使用
lodash-es和babel-plugin-lodash。 - 移除 Polyfill：现代浏览器环境下，不需要全部引入
core-js，可以使用useBuiltIns: 'usage'精确控制：
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: 3,
},
],
],
8. 使用 CDN
将常见的第三方库通过 CDN 加载，减少打包文件大小：
module.exports = {
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
};
HTML 模板中加载：
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
9. 减少 source-map 大小
在生产模式中使用轻量级的 source-map，例如：
module.exports = {
devtool: 'source-map',
};
对于极端情况，可以完全禁用：
module.exports = {
devtool: false,
};
10. 使用 Bundle 分析工具
通过工具识别构建中的冗余依赖或大文件：
- Webpack Bundle Analyzer：bash复制代码
npm install webpack-bundle-analyzer --save-dev
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
plugins: [new BundleAnalyzerPlugin()],
};
以上方法可以根据实际项目需求灵活组合使用。每次优化后可以通过分析工具评估效果，确保在降低文件体积的同时不影响功能和性能。
发布者：myrgd，转载请注明出处：https://www.object-c.cn/5080
