当前位置：首页 > news >正文

Webpack 优化策略

news 2025/7/30 6:15:16

1. 构建速度优化

缓存优化

// 使用 cache 配置启用持久化缓存
module.exports = {cache: {type: 'filesystem', // 使用文件系统缓存buildDependencies: {config: [__filename]}}
};

多线程构建

const threadLoader = require('thread-loader');module.exports = {module: {rules: [{test: /\.js$/,use: ['thread-loader','babel-loader']}]}
};

externals 外部依赖

// 将大型库作为外部依赖，避免打包
module.exports = {externals: {'react': 'React','react-dom': 'ReactDOM'}
};

2. 打包体积优化

Tree Shaking

// 确保使用 ES6 模块语法以启用 Tree Shaking
module.exports = {mode: 'production',optimization: {usedExports: true,sideEffects: false // 或指定有副作用的文件}
};

代码分割

module.exports = {optimization: {splitChunks: {chunks: 'all',cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name: 'vendors',chunks: 'all',}}}}
};

动态导入

// 使用动态导入实现按需加载
const module = await import('./heavy-module.js');// 路由级别的代码分割
const Home = () => import('./Home.vue');

3. 资源优化

压缩优化

const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');module.exports = {optimization: {minimizer: [new TerserPlugin({parallel: true,terserOptions: {compress: {drop_console: true // 移除 console}}}),new CssMinimizerPlugin()]}
};

图片优化

module.exports = {module: {rules: [{test: /\.(png|jpe?g|gif|svg)$/i,use: [{loader: 'image-webpack-loader',options: {mozjpeg: { progressive: true },optipng: { enabled: false },pngquant: {quality: [0.65, 0.90],speed: 4}}}]}]}
};

4. 解析优化

别名和扩展

module.exports = {resolve: {alias: {'@': path.resolve(__dirname, 'src'),'components': path.resolve(__dirname, 'src/components')},extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],// 减少文件系统调用modules: [path.resolve(__dirname, 'src'), ...nodeModulesPaths]}
};

精确匹配

module.exports = {module: {rules: [{test: /\.js$/,include: path.resolve(__dirname, 'src'), // 精确指定目录exclude: /node_modules/,use: 'babel-loader'}]}
};

5. 开发环境优化

模块热替换 (HMR)

module.exports = {devServer: {hot: true,client: {overlay: false}},plugins: [new webpack.HotModuleReplacementPlugin()]
};

Source Map 优化

module.exports = {devtool: process.env.NODE_ENV === 'development' ? 'eval-source-map' : 'source-map'
};

6. 分析和监控

Bundle 分析

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {plugins: [new BundleAnalyzerPlugin({analyzerMode: 'static',openAnalyzer: false})]
};

构建性能分析

module.exports = {stats: {preset: 'minimal',timings: true,errors: true,warnings: true}
};

7. 高级优化策略

预加载和预获取

// 在路由中使用魔法注释
const Login = () => import(/* webpackChunkName: "login" *//* webpackPrefetch: true */'./Login.vue'
);

预构建依赖

// 使用 webpack 5 的缓存功能
module.exports = {experiments: {lazyCompilation: true // 懒编译未使用的模块}
};

DLL 插件（适用于大型项目）

// webpack.dll.js
module.exports = {entry: {vendor: ['react', 'react-dom']},plugins: [new webpack.DllPlugin({name: '[name]',path: path.resolve(__dirname, 'dll/[name].manifest.json')})]
};