webpack 构建速度和体积优化

2020-12-08 本文已影响0人阿畅_

构建速度优化

使用 webpack 内置的 stats

stats 构建的统计信息
package.json 中使用 stats

"scripts": {
  "build:stats": "webpack --env production --json > stats.json"
},

缺点：颗粒度太粗，看不出问题所在。

速度分析

使用 speed-measure-webpack-plugin 可以看到每个 loader 和插件执行耗时
安装

yarn add speed-measure-webpack-plugin -D

使用

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
 
const smp = new SpeedMeasurePlugin();
 
const webpackConfig = smp.wrap({
  plugins: [
    ...
  ]
});

分析体积大小 webpack-bundle-analyzer

安装

npm install --save-dev webpack-bundle-analyzer
or
yarn add -D webpack-bundle-analyzer

使用

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

使用高版本的 webpack 和 node.js

因为 webpack 和 node 都在优化和迭代，使用高版本的可以有效优化打包构建速度

使用 webpack4 优化原因

v8 带来的优化（for of 替代 forEach、Map 和 Set 替代 Object，includes 替代 indexOf）
默认使用更快的 md4 hash 算法
webpack AST 可以直接从 loader 传递给 AST ，减少分析时间
使用字符串方法替代正则表达式

使用多进程/ 多实例构建

使用 HappyPack 解析资源

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

const HappyPack = require('happypack');

exports.module = {
  loaders: {
    test: /.js$/,
    loader: 'happypack/loader',
    include: [
      // ...
    ],
  }
};

这个库作者已经不维护了，webpack4 后的推荐使用 thread-loader

使用 thread-loader 解析资源

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

// 安装
npm install --save-dev thread-loader
// webapck.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve('src'),
        use: [
          'thread-loader',
          // your expensive loader (e.g babel-loader)
        ],
      },
    ],
  },
};

使用多进程/ 多实例并行压缩

使用 parallel-uglify-plugin 插件

import ParallelUglifyPlugin from 'webpack-parallel-uglify-plugin';

module.exports = {
  plugins: [
    new ParallelUglifyPlugin({
      uglifyJS: {
        output: {
          beautify: false,
          comments: false
        },
        comperss: {
          // 是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用
          warnings: false,
          drop_console: true,
          collapse_vars: true,
          reduce_vars: true
        }
      },
    }),
  ],
};

使用 uglifyjs-webpack-plugin 开启 parallel 参数

安装

npm i -D uglifyjs-webpack-plugin

使用

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        warnings: false,
        parse: {},
        compress: {},
        mangle: true,
        output: null,
        toplevel: false,
        nameCache: null,
        ie8: false,
        keep_fnames: false
      },
      parallel: true
    })
  ]
}

terser-webpack-plugin 开启 parallel 参数

推荐使用

module.exports = {
  optimization: {
    minimizer: [
      new Terserplugin({
        parallel: true
      })
    ]
  }
}

分包构建

使用 html-webpack-externals-plugin

将基础包通过 cdn 引入，不打入 bundle 中

new HtmlWebpackExternalsPlugin({
  externals: [
    {
      module: 'react',
      entry: 'https://cdn.bootcdn.net/ajax/libs/react/17.0.0/cjs/react.production.min.js',
      global: 'React',
    },
  ],
})

缺点如果需要多个基础包，引入的还是过多

使用预编译资源模块

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

使用

创建 webpack.dll.config.js

module.exports = {
  context: process.cwd(),
  entry: {
    library: [
      'react',
      'react-dom',
      'redux',
      'react-redux'
    ],
    // 如果有多个，直接在增加一个
  }
  output: {
    // 这里打包后的文字是 library.dll.js
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'build/libarary'),
    // 暴露的库的名字
    library: '[name]'
  },
  plugins: [
    // 指定包存放的位置
    new webpack.DllPlugin({
      name: '[name]',
      // 描述动态链接库 mainfest 文件输出时的文件名称
      // path: 'manifest.json'
      path: path.resolve(__dirname, 'build/libarary/[name].json')
    })
  ]
}

在 pageage.json scripts 中增加命令

"scripts": {
  "dll": "webpack --config webpack.dll.js"
}

执行 npm run dll 分包
在 webpack.config.js 引入

module.exports = {
  plugins: [
    new webpack.DllReferencePlugin({
      // 刚打包后的json文件地址
      // manifest: require('xxx.json'),
      manifest: require('./build/library/libary.json'),
    })
    // 如果引入多个，使用多次此插件
  ]
}

利用缓存提升构建速度

目的：提升二次构建速度
缓存思路
- babel-loader 开启缓存
- terser-webpack-plugin 开启缓存
- 使用 cache-loader 或者 hard-source-webpack-plugin
开启缓存后 node_modules 下会有一个 .cache 目录

babel-loader 开启缓存

use: [
  {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true
    }
  }
]

terser-webpack-plugin 开启缓存

module.exports = {
  optimization: {
    minimizer: [
      new Terserplugin({
        parallel: true,
        cache: true
      })
    ]
  }
}

使用 hard-source-webpack-plugin 开启缓存

安装

npm install --save-dev hard-source-webpack-plugin or yarn add --dev hard-source-webpack-plugin

使用

// webpack.config.js

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

plugins: [
  new HardSourceWebpackPlugin()
]

缩小构建目标来优化构建速度

目的：尽可能的少构建模块
- 如： babel-loader 不解析 node_modules

减少文件搜索范围

合理使用 resolve.alias

创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块

module.exports = {
  resolve: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react/dist/react.min.js'),
    }
  }
}

resolve.modules 配置 (减少模块搜索层级)

告诉 webpack 解析模块时应该搜索的目录。

module.exports = {
  resolve: {
    modules: [path.resolve(__dirname, "node_modules")]
  }
}

resolve.mainFields

告诉 webpack 入口文件，此选项将决定在 package.json 中使用哪个字段导入模块。

module.exports = {
  resolve: {
    //指定入口文件 main 意思是从 package.json 中 main 字段中查找
    mainFields: ['main']
  }
}

resolve.extensions

自定义解析确定的扩展。默认值是：
模块路径的查找，例如： import Index from 'index' 没有写后缀，webpack 会先去找 index.js 文件，在去找 index.json

extensions: [".js", ".json"]

可以避免 webpack 做没意义的查找

构建体积优化

Tree Shaking

概念： 1 个模块可能有多个方法，只要其中某个方法使用到了，则整个问价你都会被打包到 bundle 里面去，tree shaking 就是只把用到的方法打入 bundle，没有到的会被 uglify 阶段被擦除掉。

无用的 CSS 如何删除掉的？

PurifyCSS：遍历代码，识别已经用到的 CSS Class （已经不维护了）
uncss：HTML 需要通过 jsdom 加载，所有的样式通过 PostCss 解析，通过 document.querySelector 来识别在 HTML 文件里面不存在的选择器。
使用 purgecss-webpack-plugin 和 mini-css-extract-plugin 配合使用

const path = require('path')
const glob = require('glob')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const PurgeCSSPlugin = require('purgecss-webpack-plugin')
const PATHS = {
  src: path.join(__dirname, 'src')
}

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        "css-loader"
      ]
    }
  ]
},
plugins: [
  new MiniCssExtractPlugin({
    filename: "[name].css",
  }),
  new PurgeCSSPlugin({
    paths: glob.sync(`${PATHS.src}/**/*`,  { nodir: true }),
  }),
]

图片压缩

基于 Node 库 imagemin
使用配合 image-webpack-loader

imagemin 的优点

有很多定制选项
可以引入更多第三方插件，如 pngqeant
可以处理多种图片格式

图片压缩的原理 png

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

使用 image-webpack-loader

npm install image-webpack-loader --save-dev

// webpack.config.js
rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: [0.65, 0.90],
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
          quality: 75
        }
      }
    },
  ],
}]

动态 Polyfill

Polyfill 几种方案的优缺点

babel-polyfill

优点： React16官方推荐
缺点：体积过大，难以抽离Map、Set。项目中 react 是单独用 CND 引入，使用时需要在 react 前加载。

babel-plugin-transform-runtime

优点：只能 polyfill 用到的类和方法，体积相对较小
缺点：不能 polyfill 原型上的方法，不适用于业务复杂项目。

自己map、set的polyfill

优点：定制化高，体积小
缺点：就算体积小，但是所有用户都需要加载，重复造轮子

polyfill-service

优点：识别 User Agent，只给用户返回需要的 polyfill
缺点：可能国内部分奇葩浏览器 UA 无法识别（但可以降级返回所需全部）

使用

polyfill.io 官方提供的服务

https://polyfill.io/v3/polyfill.min.js

基于官方自建 polyfill 服务

https://polyfill.io/v3/polyfill.min.js?features=es2015%2Ces2016%2Ces2017

webpack 构建速度和体积优化

构建速度优化

使用 webpack 内置的 stats

速度分析

分析体积大小 webpack-bundle-analyzer

使用高版本的 webpack 和 node.js

使用 webpack4 优化原因

使用多进程/ 多实例构建

使用 HappyPack 解析资源

使用 thread-loader 解析资源

使用多进程/ 多实例并行压缩

使用 parallel-uglify-plugin 插件

使用 uglifyjs-webpack-plugin 开启 parallel 参数

terser-webpack-plugin 开启 parallel 参数

分包构建

使用 html-webpack-externals-plugin

使用预编译资源模块

使用

利用缓存提升构建速度

babel-loader 开启缓存

terser-webpack-plugin 开启缓存

使用 hard-source-webpack-plugin 开启缓存

缩小构建目标来优化构建速度

减少文件搜索范围

合理使用 resolve.alias

resolve.modules 配置 (减少模块搜索层级)

resolve.mainFields

resolve.extensions

构建体积优化

Tree Shaking

无用的 CSS 如何删除掉的？

图片压缩

imagemin 的优点

图片压缩的原理 png

使用 image-webpack-loader

动态 Polyfill

Polyfill 几种方案的优缺点

使用

猜你喜欢

热点阅读

webpack 构建速度和体积优化

构建速度优化

使用 webpack 内置的 stats

速度分析

分析体积大小 webpack-bundle-analyzer

使用高版本的 webpack 和 node.js

使用 webpack4 优化原因

使用 多进程/ 多实例构建

使用 HappyPack 解析资源

使用 thread-loader 解析资源

使用 多进程/ 多实例 并行压缩

使用 parallel-uglify-plugin 插件

使用 uglifyjs-webpack-plugin 开启 parallel 参数

terser-webpack-plugin 开启 parallel 参数

分包构建

使用 html-webpack-externals-plugin

使用预编译资源模块

使用

利用缓存提升构建速度

babel-loader 开启缓存

terser-webpack-plugin 开启缓存

使用 hard-source-webpack-plugin 开启缓存

缩小构建目标来优化构建速度

减少文件搜索范围

合理使用 resolve.alias

resolve.modules 配置 (减少模块搜索层级)

resolve.mainFields

resolve.extensions

构建体积优化

Tree Shaking

无用的 CSS 如何删除掉的？

图片压缩

imagemin 的优点

图片压缩的原理 png

使用 image-webpack-loader

动态 Polyfill

Polyfill 几种方案的优缺点

使用

猜你喜欢

热点阅读

使用多进程/ 多实例构建

使用多进程/ 多实例并行压缩