webpack性能优化

1. 开发环境性能优化

1.1 优化打包构建速度

1.1.1 HMR

https://www.cnblogs.com/PHY01/p/15654771.html

1.2 优化代码调试

1.2.1 source-map

https://www.cnblogs.com/PHY01/p/15654780.html

2. 生产环境性能优化

2.1 优化打包构建速度

2.1.1 oneOf

优化生产环境打包速度

rules: [{
  //以下loader只会匹配一个 注意:不能有两个配置处理同一类型文件
  {
    test:/\/,
    use:['xxx-loader']
  }
  oneOf: [
      //如果需要多个配置处理同一类型文件,按照配置执行的先后顺序,将排前面执行loader,放在与oneOf平级的上方。
      {},
      {}
  ]
}]

2.1.2 babel缓存

让第二次打包构建速度更快

babel的使用:https://www.cnblogs.com/PHY01/p/15628575.html

  1. 添加配置项

    //第二次构建时,会读取之前的缓存
    options:{
        cacheDirectory:true
    }
    
  2. 启动服务

/* 
服务器代码
启动服务器指令:
nodemon
node server.js
访问:
localhost:3000
*/

const express = require('express')
const app = express()

app.use(express.static('build',{maxAge:1000*3600}))
app.listen(3000)

2.1.3 多线程打包

https://www.cnblogs.com/PHY01/p/15654899.html

2.1.4 externals

外部扩展

使用:

  1. webpack.config.js中与entry平级

    entry:'src/js/index.js',
    ......
    externals:{ //拒绝jQuery被打包
        jquery:'jQuery'  //jQuery包名
    }
    
  2. 在index.html文件中需要引入jQuery的CDN链接,才能使用jquery。

2.1.5 dll

https://www.cnblogs.com/PHY01/p/15654818.html

2.2 优化代码运行的性能

2.2.1 文件资源缓存(hash,chunkhash,contenthash)

判断三者的区别,要开启服务,见babel缓存第二点

hash:每次webpack构建时,会产生一个唯一的hash值,js和css同时使用一个hash值,如果重新打包,会导致所有缓存失效(即使只修改了js或css中某一文件的内容,资源都会重新加载,network可见)

chunkhash:根据chunk生成的hash值,如果打包来自于同一个chunk,那么hash值就一样。css与js被引入至同一个入口文件,所以属于同一个chunk(即使只修改了js或css中某一文件的内容,资源都会重新加载,network可见)

contenthash:根据文件的内容生成hash值,不同文件的hash值不一样,缓存中某一文件被修改,只会重新加载该文件,不会影响其他缓存的文件。

2.2.2 tree shaking

构建代码时,去除无用代码,减少代码体积

前提:

1)必须使用ES6模块化

2)开启production环境

package.json中配置:

"sideEffects":["*.css"] //配置所有的css文件不进行tree shaking

2.2.3 code split

https://www.cnblogs.com/PHY01/p/15654825.html

2.2.4 懒加载/预加载

https://www.cnblogs.com/PHY01/p/15654832.html

2.2.5 pwa

https://www.cnblogs.com/PHY01/p/15654838.html

posted @ 2021-12-07 10:52  STRIVE-PHY  阅读(28)  评论(0编辑  收藏  举报