面试题 - 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 离线可访问技术

你可能感兴趣的:(面试题 - Webpack-优化)