【学习打卡】第7天 webpack(5)

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

课程内容：

今天学习的内容包括：
10-16 webpack优化构建速度-考点总结和复习
10-17 webpack优化产出代码-考点串讲
10-18 什么是Tree-Shaking
10-19 ES Module 和 Commonjs 的区别
10-20 什么是Scope Hosting
webpack 性能优化主要是优化构建打包速度 + 优化产出代码。
这几节主要是优化产出代码。

课程收获：

大概复述一下

优化构建速度：
可用于生产环境：babel-loader、IgnorePlugin、noParse、happyPack、ParallelUglifyPlugin
开发环境：自动刷新、热更新、DllPlugin、

产出代码优化方式

小图片 base64 编码

  {
    test: /\.(png|jpg|jpeg|gif)$/,
    use: {
      loader: 'url-loader',
      options: {
        // 小于 5kb 的图片用 base64 格式产出
        // 否则，依然延用 file-loader 的形式，产出 url 格式
        limit: 5 * 1024,
        // 打包到 img 目录下
        outputPath: '/img1/',
        // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
        publicPath: 'http://cdn.abc.com'
      }
    }
  },

output filename: ‘[name].[contentHash:8].js’

只有发生变化文件更新 hash 值，需要重新加载。不变的用缓存。

懒加载

公共和三方代码单独提取

CDN 加速

  output: {
    publicPath: 'http://cdn.abc.com'
  }

引入文件地址以 publicPath 前缀
对应打包后文件也上传 publicPath 对应服务器

用 production

自动开启代码压缩
自动删除 vue、react 里调试代码
自动启动 tree-shaking （没有用到的代码引用了也不打包 ）

Module 和 Commonjs

ES6 Module 静态引入(直接 import 那种)，编译时引入, 能用 Tree-Shaking
Commonjs 动态引入(比如某些条件下，require(’./XX’))，执行时引入

Scope Hosting

代码体积更小（多个文件对应多个函数打包成一个函数）
创建函数作用域更少
代码可读性更好