webpack

构建速度和体积优化

# 01. stats

stats: 构建的统计信息

使用webpack 内置的stats

 "build:stats": "cross-env NODE_ENV=production webpack --config ./script/webpack.config.js --json > stats.json"

# 02. 速度分析

速度分析:

分析整个打包总耗时
每个插件和loader的耗时情况

const SpeedMeasureWebpackPlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasureWebpackPlugin();
module.exports = smp.wrap({
  // webpack config
})

# 03. 体积分析

体积分析：

依赖的第三方模块文件大小
业务里面的组件代码大小

构建完成后会在 8888 端口展示大小

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

# 体积优化：

Scope Hoisting
Tree-shaking
公共资源分离
图片压缩
动态 Polyfill

# 04. 多进程/多实例构建

资源并行解析可选方案:

thread-loader
parallel-webpack
HappyPack

# HappyPack

原理：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给worker 线程中
HappyPack工作流程

# thread-loader

原理：每次 webpack 解析一个模块，thread-loader 会将它及它的依赖分配给 worker 线程中

use: [
  {
      loader: 'thread-loader',
      options: {
          workers: 3
      }
  }
]

# 并行压缩

使用 parallel-uglify-plugin 插件
uglifyjs-webpack-plugin 开启 parallel 参数
terser-webpack-plugin 开启 parallel 参数

# 04. 分包

设置 Externals:

思路：将 react、react-dom 基础包通过cdn 引入，不打入 bundle 中

使用 html-webpack-externalsplugin

优化：进一步分包：预编译资源模块

思路：将 react、react-dom、redux、react-redux基础包和业务基础包打包成一个文件
方法：使用 DLLPlugin 进行分包，DllReferencePlugin对 manifest.json 引用

使用 DLLPlugin 进行分包：

// webpack.dll.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        library: [
            'react',
            'react-dom'
        ]
    },
    output: {
        filename: '[name]_[chunkhash].dll.js',
        path: path.join(__dirname, 'build/library'),
        library: '[name]'
    },
    plugins: [
        new webpack.DllPlugin({
            name: '[name]_[hash]',
            path: path.join(__dirname, 'build/library/[name].json')
        })
    ]
};

在 webpack.config.js 引入

new webpack.DllReferencePlugin({
  manifest: require('./build/library/library.json')
})

# 05. 减少文件搜索范围

优化 resolve.modules 配置（减少模块搜索层级）
优化 resolve.mainFields 配置
优化 resolve.extensions 配置
合理使用 alias

# 06. 图片压缩

{
    test: /.(png|jpg|gif|jpeg)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[name]_[hash:8].[ext]'
            }
        },
        {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: '65-90',
                speed: 4
              },
              gifsicle: {
                interlaced: false,
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            }
        }
    ]
}

# Imagemin的压缩原理

pngquant: 是一款PNG压缩器，通过将图像转换为具有alpha通道（通常比24/32位PNG文件小60-80％）的更高效的8位PNG格式，可显著减小文件大小。
pngcrush:其主要目的是通过尝试不同的压缩级别和PNG过滤方法来降低PNGIDAT数据流的大小。
optipng:其设计灵感来自于pngcrush。optipng可将图像文件重新压缩为更小尺寸，而不会丢失任何信息。
tinypng:也是将24位png文件转化为更小有索引的8位图片，同时所有非必要的metadata也会被剥离掉

#webpack

← 热更新机制打包原理→