- 利用缓存插件提升二次构建速度
yarn add hard-source-webpack-plugin
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
第一次构建耗时
第二次构建耗时
2. 图片压缩
yarn add image-webpack-loader
module.exports = {
chainWebpack: config => {
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()
}
}
压缩前
压缩后
- 生成gzip文件
yarn add compression-webpack-plugin
configureWebpack: {
plugins: [
// 大于10240byte文件会生成gzip文件
new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 102400,
deleteOriginalAssets: false
})
]
},
nginx需配置
http {
...
#开启gzip压缩
gzip_static on;
}
- 依赖包单独打包
chainWebpack: config => {
config.optimization.splitChunks({
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 300000, // 依赖包超过300000bit将被单独打包
automaticNameDelimiter: '-',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
return `chunk.${packageName.replace('@', '')}`
},
priority: 10
}
}
})
}
- 使用TreeShaking擦除未使用的css
const PurgeCSSPlugin = require('purgecss-webpack-plugi')
const glob = require('glob');
const PATH = {
src: path.resolve(__dirname, 'src')
}
module.exports = {
configureWebpack: {
plugins: [
// 大于10240byte文件会生成gzip文件
new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 102400,
deleteOriginalAssets: false
}),
// new BundleAnalyzerPlugin()
new HardSourceWebpackPlugin(),
new PurgeCSSPlugin({
paths: glob.sync(`${PATH.src}/**/*`, { nodir: true }),
})
]
},
}