面试题 - Webpack-优化

webpack性能优化

• 开发环境性能优化
• 生产环境性能优化

HMR（hot module replacement 热模替换）

作用：一个模块发生变化，只会重新加载变化了的模块。提升构建速度。
使用方式：在devServer 中添加hot属性为true。
注意：
css文件可以，因为style-loader内部实现了
js文件默认不支持 （注意：不可以对入口文件进行HMR）
处理方式如下

if (module.hot){
  // 一旦module.hot为true，则表示开始了HMR功能。
  module.hot.accept('./print.js',()=>{
    // 方法会监听print.js文件的变化，一旦发生变化，其他js模块不会重新打包构建。
    // 会执行后面的回调函数
    print();
  })
}

html文件，默认不支持。解决方法: 修改entry入口，将html文件引入。(不需要HMR)

• 优化代码调试

source-map

• 这是一种提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪到源代码错误）

// webpack.config.js 配置如
devtool:'inline-source-map'

source-map 外部
// 错误代码准确信息 和 源代码的错误位置
inline-source-map 内联
// 只生成一个内联的source-map
// 错误代码准确信息 和 源代码的错误位置  
hide-source-map 外部
// 错误代码准确信息，但是没有错误位置  
// 不能追踪代码错误，只能提示到构建后代码的位置
eval-source-map 内联
// 每一个文件都生成对应的source-map , 都在eval
// 错误代码准确信息 和 源代码的错误位置
nosource-source-map 外部
// 错误代码准确信息 但是没有任何源代码信息
cheap-source-map 外部
// 错误代码准确信息 和 源代码的错误位置
// 只能精确到行
cheap-module-source-map 外部
// 错误代码准确信息 和 源代码的错误位置
// 会将loader的source map 加入

总结如下:

• 内联和外部的区别: 1. 外部会生成文件，内联不会 2. 内联构建速度更快
• 开发环境使用 ： eval-source-map
• 生产环境使用 : source-map

oneOf

• 在rules中配置， 指定该oneOf中的loader不会重复匹配。

module:{
  rules:[
    {
      test:/\.js$/,
      loader:'xxx'
    }
    {
        oneOf:[
          {test:xxx,
          loader:'xxx'}
        ]
    }
  ]
}

缓存

babel缓存
- cacheDirectory:true
---> 让第二次打包构建速度更快

文件资源缓存
hash : 每次webpack构建时都会生成一个唯一的hash值。
  问题：因为js和css使用同一个hash值，如果重新打包会导致所有缓存失效。(可能只改动了一个文件)
chunkhash: 根据chunk生成的hash值，如果打包源来自同一个chunk，那么hash值就一样
  问题：js和css的hash还是一样的，因为js中引入了css，所以同属一个chunk
contenthash：根据content生成的hash值，不同文件的hash值一定不一样。
---> 让代码上线更好使用缓存

tree shaking

• tree shaking 去除无用代码
• 前提 : 1.使用es6模块化 2.开启production环境
• 作用：减少代码体积
• 副作用：可能会把css资源当成无用代码，解决方法：在package.json中配置："sideEffects":["*.css"], sideEffects中的所有文件都不会进行tree shaking了

code split

方式1： 配置多入口 entry:{index:'index.js',test:'test:test.js'}
方式2： 配置optimization

// 作用：
// 1.将node_modules中的代码单独打包成一个chunk输出
// 2.不会重复打包公共文件，会单独打包成一个独立的chunk，实现共用(多入口才会进行此分析)。
optimization:{
  splitChunks:{
      chunks:'all'
  }
}

方式3：通过js的方式，动态导入语法，将某个文件单独打包。

// 此时test就会被单独打包成一个chunk
import( /* webpackChunkName:'tets' */'./test').then(res=>{}).catch()

懒加载和预加载

• 懒加载：触发到某个条件后才加载

import(/*webpackChunkName: 'test' */'test.js')
.then(({xxx,xxx})=> {使用})
.catch(()=>{拦截错误})

• 预加载 : （ webpackPrefetch:true 慎用），当浏览器空闲的时候开始加载，优化读取时的速度。

import(/*webpackChunkName: 'test' , webpackPrefetch:true */'test.js')
.then(({xxx,xxx})=> {使用})
.catch(()=>{拦截错误})

PWA离线可访问技术

• workbox ---> workbox-webpack-plugin
• 在webpack.config.js中配置plugins

// PWA核心技術
    new workboxWebpackPlugin.GenerateSW({
      /*
        1. 快速啟動serviceworker
        2. 刪除旧的serviceworker

        生成一个serviceworkder配置文件。
      */
      clientsClaim:true,
      skipWaiting:true
    })

• 在入口文件中

// 注册serviceWorker
// 处理兼容问题
/**
 * 1. eslint不认识window navigator等全局变量 所以需要在package.json配置
 * "env":{
      "browser":true
    }

    2. serviceWorker代码必须运行在服务器上
    - nodejs
    - npm i serve -g
      serve -s build 启动服务服务器,将build目录下所有资源作为静态资源暴露出去
 */
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js') // 该文件由 workbox-webpack-plugin 生成
      .then(() => {
        console.log('ws注册成功');
      })
      .catch(() => {
        console.log('ws注册失败');
      });
  });
}

多进程打包

• 使用thread-loader，实现多进程打包。(对loader使用，放在loader之后，编写顺序如下)
• 开启多进程打包大概为600ms，进程通信也有开销。只有打包时间过长才需要多进程打包。

{
  loader:"thread-loader",
  options:{
     workers:2 // 2个进程  
  }
},
{
  loader:"babel-loader",
  options:{
     some code...  
  }
}

externals

• 将文件忽略。不参与打包。

 webpack.config.js
mode:"",
externals:{
  // 拒绝jQuery参与打包
  // 库名 ：包名
  jquery:'jQuery'
}

dll

• 将不同的库分成不同的chunk打包，更利于性能优化。
• webpack --config webpack.dll.js 表示将webpack的配置文件改为webapck.dll.js

开发环境性能优化

优化打包构建速度

• HMR https://webpack.docschina.org/configuration/dev-server/

优化代码调试

• source-map https://webpack.docschina.org/configuration/devtool/#devtool

生产环境性能优化

优化打包构建速度

• oneOf
• babel缓存
• externals 将文件忽略。不参与打包。
• dll 将不同的库分成不同的chunk打包，更利于性能优化。

优化代码性能

• 缓存(hash | chunkhash | contenthash)
• tree shaking( 删除无用代码 ) ，前提：production环境,以及ES6模块化。
• code split (代码拆分)
• 懒加载 / 预加载
• pwa 离线可访问技术