- 减少打包体积
Tree Shaking
Tree Shaking: 通过删除未使用的代码来减小打包体积。确保代码是ES6模块，并启用生产环境配置。
// webpack.config.js
module.exports = {
mode: 'production',
optimization: {
usedExports: true,
},
};
代码拆分 (Code Splitting)
代码拆分 (Code Splitting): 通过将代码拆分成多个bundle来实现按需加载，例如使用import()动态加载模块。
// 动态引入模块
import('./module').then(module => {
module.default();
});
压缩代码
压缩JavaScript：使用TerserWebpackPlugin来压缩JavaScript文件。
// webpack.config.js
const TerserWebpackPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [new TerserWebpackPlugin()],
},
};
压缩CSS：使用OptimizeCSSAssetsWebpackPlugin来压缩CSS文件。
// webpack.config.js
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new OptimizeCSSAssetsPlugin({}),
],
},
};
删除无用CSS
PurgeCSS: 使用purgecss-webpack-plugin来删除未使用的CSS。
// webpack.config.js
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const path = require('path');
module.exports = {
plugins: [
new PurgeCSSPlugin({
paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
}),
],
};
- 提高构建速度
DLL Plugin
DLL Plugin: 使用DLLPlugin和DLLReferencePlugin将依赖包预编译成一个独立的包，以减少构建时间。
// webpack.dll.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
vendor: ['react', 'react-dom'],
},
output: {
path: path.join(__dirname, 'dll'),
filename: '[name].dll.js',
library: '[name]_library',
},
plugins: [
new webpack.DllPlugin({
name: '[name]_library',
path: path.join(__dirname, 'dll', '[name]-manifest.json'),
}),
],
};
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.DllReferencePlugin({
context: path.join(__dirname, 'dll'),
manifest: require('./dll/vendor-manifest.json'),
}),
],
};
多线程/并行构建
Thread-loader: 使用thread-loader来开启多线程构建。
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\js$/,
use: ['thread-loader', 'babel-loader'],
exclude: /node_modules/,
},
],
},
};
HappyPack: 使用HappyPack来并行构建。
// webpack.config.js
const HappyPack = require('happypack');
module.exports = {
module: {
rules: [
{
test: /\js$/,
use: 'happypack/loader?id=js',
exclude: /node_modules/,
},
],
},
plugins: [
new HappyPack ({
id: 'js',
loaders: ['babel-loader'],
}),
],
};
缓存
缓存Loader：使用cache-loader或babel-loader的缓存功能来提高构建速度。
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\js$/,
use: [
'cache-loader',
'babel-loader',
],
exclude: /node_modules/,
},
],
},
};
- 优化开发体验
热模块替换 (HMR)
HMR: 使用webpack-dev-server和HotModuleReplacementPlugin来实现热模块替换，提高开发效率。
// webpack.config.js
const webpack = require('webpack');
module.exports = {
devServer: {
contentBase: './dist',
hot: true,
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
};
- 其他优化
分析工具
Bundle Analyzer: 使用webpack-bundle-analyzer来可视化分析你的bundle，找出大文件和依赖。
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
],
};
通过这些优化方法，你可以有效地减小打包体积、提高构建速度和改善开发体验。
