构建速度和打包体积优化

分析打包过程速度分析 speed-measure-webpack-plugin

const SpeedMeasureplugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasureplugin();
module.exports = smp.warp({
    ...webpackConfig
})

1
2
3
4
5

体积分析 webpack-bundle-analyzer

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.export = {
    plugin: [
        new BundleAnalyzerPlugin()
    ]
}

1
2
3
4
5
6

优化速度

使用高版本的webpack和node。
多进程/多实例构建。

thread-loader
happy-pack(不推荐，不再维护)
并行压缩terser-webpack-plugin

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                parallel: true
            })
        ]
    }
}

1
2
3
4
5
6
7
8
9
10

分包预编译资源模块-Dllplugin
缓存-提升二次构建速度 babel-loader?cacheDirectory=true

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                cache: true 
            })
        ]
    }
}

1
2
3
4
5
6
7
8
9
10

hard-source-webpack-plugin

缩小构建目标

exclude/include
减少文件搜索范围

module.exports = {
    resolve: {
        modules: [path.resolve(_dirname, 'node_modules')], // 减少模块搜索层级。只搜索当前项目的node_modules
        mainFilds: ['main'], // 指定主入口文件
        extensions: ['.js'], // 执行搜索文件后缀
        alias: {
            
        }
    }
}

1
2
3
4
5
6
7
8
9
10

体积优化

删除没有用到的css purgecss-webpack-plugin
图片压缩 image-webpack-loader
动态polyfill polyfill.io

← macOS Android环境搭建从输入url到页面展示我们可以做那些优化？→