webpack

,

webpack 性能优化

webpack 的优化瓶颈，主要是两个方面

  • webpack 的构建过程太长
  • webpack 打包的结果体积太大

构建过程

对于构建时间，可以采用 speed-measuer-webpack-plugin 插件进行分析

多线程打包

可以使用 happypack 进行多线程打包，设置 js 或者 css 打包过程，使用 happypack 的 loader 进行打包

如果项目比较小不建议使用，反而会降低打包速度

happypack 的基本原理是将打包任务分配到多个子进程中去并行处理，子进程处理完成后会把结果发送到主进程中，从而减少构建时间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    include: path.resolve('src'),
    use: 'Happypack/loader?id=js'  // 使用 happypack 的 loader 进行打包
  },
  {
    test: /\.css$/
  }
]

plugins: [
  // css
  new Happypack({
    id: 'css'
  }),
  new Happypack({
    id: 'js',
    use: [
      {
        loader: 'babel-loader',
        options: {
          preset: [
            '@babel/preset-env'
          ]
        }
      }
    ]
  })
]

使用 tread-load webpack4 之后 官方推出的

thread-loader 会将您的 loader 放置在一个 worker 池里面运行，以达到多线程构建

1
2
3
4
5
6
7
8
9
10
11
rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    include: path.resolve("src"),
    use: [
      "thread-loader",
      // 你的高开销的loader放置在此 (e.g babel-loader)
    ]
  }
]

压缩

并行压缩主要有三个方案：

  • parallel-uglify-plugi
  • uglifyjs-webpack-plugin 开启 parallel 参数
  • terser-webpack-plugin 开启 parallel 参数 （推荐使用这个，支持 ES6 语法压缩）

预编译

可以使用预编译将提前引入的三方库进新打包处理，而不是每次都进行打包。

DllPlugin 结合 DllRefrencePlugin 插件的运用，对将要产出的 bundle 文件进行拆解打包，可以很彻底地加快 webpack 的打包速度

DllPlugin：负责抽离第三方库，形成第三方动态库dll
DllReferencePlugin：负责引用第三方库

具体可点击查看

打包体积

  • Tree-Shaking 删除冗余代码

  • 压缩 HTML/JS/CSS

    • HTML压缩： html-webpack-plugin —— 删除双引号和折叠为一行。
    • CSS
      • 压缩： mini-css-extract-plugin
      • 去除无用的 css: purgecss-webpack-plugin