webpack性能优化

目录

webpack性能优化

开发环境性能优化

优化打包构建速度

HMR

source-map

生产环境性能优化

优化打包构建速度

oneOf

babel缓存

多线程打包

externals

dll

优化代码运行的性能

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

tree shaking

code split

懒加载/预加载

pwa

正文

开发环境性能优化

优化打包构建速度

HMR

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

优化代码调试

source-map

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

生产环境性能优化

优化打包构建速度

oneOf

优化生产环境打包速度

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

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)

多线程打包

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

externals

外部扩展

使用:

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

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

dll

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

优化代码运行的性能

文件资源缓存(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值不一样,缓存中某一文件被修改,只会重新加载该文件,不会影响其他缓存的文件。

tree shaking

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

前提:

1)必须使用ES6模块化

2)开启production环境

package.json中配置:

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

code split

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

懒加载/预加载

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

pwa

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

上一篇:webpack 基础 - 06 (压缩css、js、html)


下一篇:webpack学习笔记(三):监听文件变化并编译