【学习打卡】第6天 webpack(4)

课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack
课程章节：第10章 webpack 和 babel
主讲老师：双越

课程内容：

今天学习的内容包括：
10-11 webpack优化构建速度-知识点串讲
10-12 用IngorePlugin忽略无用文件
10-13 happyPack是什么
10-14 webpack如何配置热更新
webpack 性能优化主要是优化构建打包速度 + 优化产出代码。
这几节主要是优化打包构建速度。

课程收获：

大概复述一下
优化打包速度：babel-loader IgnorePlugin noParse happyPack(多进程打包) ParallelUglifyPlugin(基于多进程开启代码压缩) 热更新 DllPlugin(第三方库打包好)

优化 babel-loader

  // cacheDirectory 没有改的部分不用编译
  // include、exclude 处理范围
  rules: [
    {
      test: /\.js$/,
      loader: ['babel-loader?cacheDirectory'],
      include: srcPath,
      // exclude: /node_modules/
    }
  ]

IngorePlugin 避免自动引入无用模块，减少打包后体积。不引入。

eg. moment 单独引入某个语言模块。忽略 moment 下 ./local 目录（所有语言包）

  plugins: [
    new webpack.IgnorePlugin(/\.\/locale/, /moment/),
  ],

noParse 配置不去打包哪些模块，避免引入后打包。引入不打包。

比如 react.min.js 已压缩没必要打包，忽略对 react.min.js 递归解析处理。

module.exports = {
  module: {
    noParse: [/react\.min\.js]
  }
}

happyPack 多进程打包, 提升构建速度

const HappyPack = require('happypack')
//...
  module: {
    rules: [
      {
        test: /\.js$/,
        // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
        use: ['happypack/loader?id=babel'],
        include: srcPath,
        // exclude: /node_modules/
      }
    ],
    plugins: [
      // happyPack 开启多进程打包
      new HappyPack({
        // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
        id: 'babel',
        // 如何处理 .js 文件，用法和 Loader 配置中一样
        loaders: ['babel-loader?cacheDirectory']
      }),
    ],
  }

ParallelUglifyPlugin 多进程压缩

  // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
  new ParallelUglifyPlugin({
    // 传递给 UglifyJS 的参数
    // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
    uglifyJS: {
      output: {
        beautify: false, // 最紧凑的输出
        comments: false, // 删除所有的注释
      },
      compress: {
        // 删除所有的 `console` 语句，可以兼容ie浏览器
        drop_console: true,
        // 内嵌定义了但是只用到一次的变量
        collapse_vars: true,
        // 提取出出现多次但是没有定义成变量去引用的静态值
        reduce_vars: true,
      }
    }
  })

自动刷新（整个网页全部刷新，状态不保留） devServer

热更新

webpack 配置

const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
  //...
  entry: {
    index: [
      // ?本地开发地址
      'webpack-dev-server/client?http://localhost:8080/',
      'webpack/hot/dev-server',
      path.join(srcPath, 'index.js')
    ],
    other: path.join(srcPath, 'other.js')
  },
  plugins: [
    new HotModuleReplacementPlugin()
  ],
  devServer: {
    hot: true
    //...
  }

开发代码内配置

  // 已配置热更新
  if (module.hot) {
    // 热更新监听更新范围，回调
    module.hot.accept(["./math"], () => {
      // ... 
    });
  }