2024-04-18 使用webpack减少打包文件数量

减少Webpack打包文件的数量通常涉及多个策略和配置选项。下面是一些具体的方法和示例代码，帮助你实现这一目标：

1. 代码分割 (Code Splitting)

使用动态导入 (import()) 语法将代码分割成多个块，这样Webpack会为每个块生成一个单独的文件。

// 假设我们有一个大型的组件库
// 而不是一次性导入整个库，我们可以按需导入
button = () => import('./Button');

2. Tree Shaking

确保你的代码和依赖库支持Tree Shaking，并且在Webpack配置中启用相应的优化选项。

// webpack.config.js
module.exports = {
// ...
optimization: {
usedExports: true, // 启用Tree Shaking
sideEffects: false, // 标记你的包没有副作用，以启用更深入的Tree Shaking
},
// ...
};

3. 使用DLL Plugin

DLL Plugin可以将特定的依赖库与业务代码分离，单独打包。

// webpack.dll.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: {
vendor: ['react', 'react-dom'] // 这里列出需要单独打包的库
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].dll.js',
library: '[name]_library' // vendor.dll.js中暴露出的全局变量名
},
plugins: [
new webpack.DllPlugin({
name: '[name]_library',
path: path.join(__dirname, 'build', '[name]-manifest.json'),
}),
],
};

然后在主Webpack配置中使用DllReferencePlugin来引用DLL生成的文件。

// webpack.config.js
const webpack = require('webpack');
const path = require('path');
const vendorManifest = require('./build/vendor-manifest.json'); // 引入DLL manifest

module.exports = {
// ...
plugins: [
new webpack.DllReferencePlugin({
context: path.resolve(__dirname),
manifest: vendorManifest,
}),
// ...
],
// ...
};

4. 优化Loader

确保Loader仅应用于必要的文件类型，并减少Loader的链式调用。

module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
// Babel配置
}
}
},
// 仅为.css文件配置style-loader和css-loader
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},

5. 压缩和优化输出

使用TerserPlugin压缩JavaScript，并使用其他插件压缩CSS。

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [new TerserPlugin(), new OptimizeCSSAssetsPlugin({})],
},
module: {
rules: [
// 为CSS配置MiniCssExtractPlugin
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
// ...
],
// ...
};

6. 利用缓存

使用Webpack的缓存功能来缓存已经构建过的模块。

// webpack.config.js
module.exports = {
// ...
cache: {
type: 'filesystem',
buildDependencies: {
config: [__filename],
},
},
// ...
};

7. 分析打包结果

使用webpack-bundle-analyzer插件来分析打包结果。

首先安装插件：

npm install