webpack

webpack 做过哪些优化，开发效率方面、打包策略方面等等、

优化 Webpack 的构建速度

  • 使用高版本的 Webpack （使用webpack4）

  • 多线程/多实例构建：HappyPack(不维护了)、thread-loader

  • 缩小打包作用域：

    • exclude/include (确定 loader 规则范围)
    • resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找)
    • resolve.extensions 尽可能减少后缀尝试的可能性
    • noParse 对完全不需要解析的库进行忽略 (不去解析但仍会打包到 bundle 中，注意被忽略掉的文件里不应该包含 import、require、define 等模块化语句)
    • IgnorePlugin (完全排除模块)
    • 合理使用alias

  • 充分利用缓存提升二次构建速度：

    • babel-loader 开启缓存
    • terser-webpack-plugin 开启缓存
    • 使用 cache-loader 或者 hard-source-webpack-plugin
    • 注意：thread-loader 和 cache-loader 兩個要一起使用的話，請先放 cache-loader 接著是 thread-loader 最後才是 heavy-loader

  • DLL：

    • 使用 DllPlugin 进行分包，使用 DllReferencePlugin(索引链接) 对 manifest.json 引用，让一些基本不会改动的代码先打包成静态资源，避免反复编译浪费时间。
  1. 使用webpack4-优化原因
  • (a) V8带来的优化（for of替代forEach、Map和Set替代Object、includes替代indexOf）
  • (b) 默认使用更快的md4 hash算法
  • (c) webpacks AST可以直接从loader传递给AST，减少解析时间
  • (d) 使用字符串方法替代正则表达式

noParse

  • 不去解析某个库内部的依赖关系
  • 比如jquery 这个库是独立的， 则不去解析这个库内部依赖的其他的东西
  • 在独立库的时候可以使用
1
2
3
4
5
6
module.exports = {
  module: {
    noParse: /jquery/,
    rules:[]
  }
}

IgnorePlugin

  • 忽略掉某些内容 不去解析依赖库内部引用的某些内容
  • 从moment中引用 ./locol 则忽略掉
  • 如果要用local的话 则必须在项目中必须手动引入
1
2
3
4
5
6
import 'moment/locale/zh-cn'
module.exports = {
    plugins: [
        new Webpack.IgnorePlugin(/./local/, /moment/),
    ]
}

dillPlugin

  • 不会多次打包， 优化打包时间
  • 先把依赖的不变的库打包
  • 生成 manifest.json文件
  • 然后在webpack.config中引入
  • webpack.DllPlugin Webpack.DllReferencePlugin

happypack -> thread-loader

  • 大项目的时候开启多线程打包
  • 影响前端发布速度的有两个方面，一个是构建，一个就是压缩，把这两个东西优化起来，可以减少很多发布的时间。

thread-loader

  • thread-loader 会将您的 loader 放置在一个 worker 池里面运行，以达到多线程构建。
  • 把这个 loader 放置在其他 loader 之前（如下图 example 的位置）， 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        include: path.resolve("src"),
        use: [
          "thread-loader",
          // 你的高开销的loader放置在此 (e.g babel-loader)
        ]
      }
    ]
  }
}

每个 worker 都是一个单独的有 600ms 限制的 node.js 进程。同时跨进程的数据交换也会被限制。请在高开销的loader中使用，否则效果不佳

压缩加速——开启多线程压缩

  • 不推荐使用 webpack-paralle-uglify-plugin，项目基本处于没人维护的阶段，issue 没人处理，pr没人合并。
    Webpack 4.0以前：uglifyjs-webpack-plugin，parallel参数
1
2
3
4
5
6
7
8
9
module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        parallel: true,
      }),
    ],
  },};

推荐使用 terser-webpack-plugin

1
2
3
4
5
6
7
module.exports = {
  optimization: {
    minimizer: [new TerserPlugin(
      parallel: true   // 多线程
    )],
  },
};
优化 Webpack 的打包体积
  • 压缩代码
  • 提取页面公共资源：
  • Tree shaking
  • Scope hoisting
  • 图片压缩
  • 动态Polyfill
speed-measure-webpack-plugin

简称 SMP，分析出 Webpack 打包过程中 Loader 和 Plugin 的耗时，有助于找到构建过程中的性能瓶颈。

开发阶段

开启多核压缩
插件： terser-webpack-plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                parallel: true,
                terserOptions: {
                    ecma: 6,
                },
            }),
        ]
    }
}