一、代码分割
代码分割能够将代码分成多个块，按需加载，从而提高加载速度和性能。Webpack通过import()函数或require.ensure()实现代码分割。
// 使用import()函数实现代码分割
import('./math').then(math => {
console.log(math.add(16, 26));
});
// 使用require.ensure()实现代码分割
require.ensure(['./math'], function(require) {
const math = require('./math');
console.log(math.add(16, 26));
});
使用webpack-bundle-analyzer工具可以分析代码分割后的模块组成，从而优化代码分割策略。
二、Tree Shaking
Tree Shaking是指删除没有使用的代码，从而减小打包后的代码体积。开启Tree Shaking需要ES6的模块引入方式，并在webpack配置文件中开启压缩模式。
// math.js
export function add(a, b) {
return a + b;
}
export function square(a) {
return a * a;
}
// app.js
import { add } from './math';
console.log(add(16, 26));
三、懒加载
懒加载能够将页面划分成多个区域，在需要加载时再请求资源，提高了初始加载速度和性能。Webpack可以使用动态import语法实现懒加载。
// 使用动态import语法实现懒加载
document.getElementById('btn').addEventListener('click', () => {
import('./lazy-loaded-module').then(module => {
// 使用模块
});
});
四、缓存
使用合理的缓存策略能够减少网络请求，提升性能。Webpack通过output.filename属性设置文件名，通过output.chunkFilename属性设置代码分割后的文件名。
//webpack.config.js
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js'
}
五、优化Loader
Webpack的Loader是打包过程中用于处理文件的转换器。优化Loader可以减小打包时间和提高性能。以下是一些优化Loader的方法：
1、使用include/exclude设置匹配规则
module.exports = {
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, 'src')
],
exclude: [
path.resolve(__dirname, 'node_modules')
],
loader: 'babel-loader'
}
]
}
};
2、尽可能使用Loader默认配置
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader'
}
]
}
};
3、尽可能使用最小化的Loader
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
// 尽可能使用最小化的babel-preset-env
presets: [['env', { modules: false }]]
}
}
}
]
}
};
4、使用HappyPack并行处理Loader
const HappyPack = require('happypack');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: 'happypack/loader?id=js'
}
]
},
plugins: [
new HappyPack({
id: 'js',
threads: 4,
loaders: ['babel-loader']
})
]
};
5、使用缓存Loader结果
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
plugins: [
new HardSourceWebpackPlugin()
]
};
六、优化Resolve
使用优化路径解析的Resolve配置项能够减少查找时间，提高性能。并通过extensions配置项减小文件查找范围。
module.exports = {
resolve: {
// 配置别名，避免路径深度影响性能
alias: {
'@': path.resolve(__dirname, 'src')
},
// 配置查找模块的路径，避免查找时间过长
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
// 启用了扩展名的查找
extensions: ['.js', '.json']
}
};
七、优化DevServer
使用Webpack DevServer能够提高开发效率和性能。以下方法可以优化DevServer：
1、利用内存减少IO操作
module.exports = {
devServer: {
// 解决多页面刷新导致重新构建所有文件的问题
lazy: false,
// 将资源放入内存中，减少IO操作
contentBase: false
}
};
2、开启Gzip压缩
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
plugins: [
new CompressionPlugin()
]
};
3、使用Hot Module Replacement（HMR）
module.exports = {
devServer: {
// 开启HMR
hot: true
},
plugins: [
// Webpack内置的HMR插件
new webpack.HotModuleReplacementPlugin()
]
};
八、使用优化后的Loader和插件
以下是一些常见Loader和插件的优化：
1、babel-loader优化
使用babel-loader的cacheDirectory选项可以启用缓存，减小编译时间。
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
}
]
}
};
2、css-loader和style-loader优化
使用mini-css-extract-plugin插件可以把CSS提取成单独的文件，减少JavaScript文件体积，提升加载速度。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// 开启HMR
hmr: true,
// 如果模块是HMR能够更新的，将导出到CSS否则将创建一个新的样式唯一URL
reloadAll: true
}
},
'css-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
})
]
};
3、html-webpack-plugin优化
使用html-webpack-plugin的template选项可以指定HTML模板路径，从而减小编译速度。
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
4、UglifyJsPlugin优化
使用terser-webpack-plugin代替UglifyJsPlugin，可以提高压缩速度和缩小代码大小。
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true // 必须启用，否则将影响调试
})
]
}
};
