目录
webpack性能优化
开发环境性能优化
优化打包构建速度
HMR
source-map
生产环境性能优化
优化打包构建速度
oneOf
babel缓存
多线程打包
externals
dll
优化代码运行的性能
文件资源缓存(hash,chunkhash,contenthash)
tree shaking
code split
懒加载/预加载
pwa
正文
开发环境性能优化
优化打包构建速度
HMR
优化代码调试
source-map
生产环境性能优化
优化打包构建速度
oneOf
优化生产环境打包速度
rules: [{
//以下loader只会匹配一个 注意:不能有两个配置处理同一类型文件
{
test:/\/,
use:['xxx-loader']
}
oneOf: [
//如果需要多个配置处理同一类型文件,按照配置执行的先后顺序,将排前面执行loader,放在与oneOf平级的上方。
{},
{}
]
}]
babel缓存
让第二次打包构建速度更快
-
添加配置项
//第二次构建时,会读取之前的缓存 options:{ cacheDirectory:true }
-
启动服务
/*
服务器代码
启动服务器指令:
nodemon
node server.js
访问:
localhost:3000
*/
const express = require('express')
const app = express()
app.use(express.static('build',{maxAge:1000*3600}))
app.listen(3000)
多线程打包
externals
外部扩展
使用:
-
webpack.config.js中与entry平级
entry:'src/js/index.js', ...... externals:{ //拒绝jQuery被打包 jquery:'jQuery' //jQuery包名 }
-
在index.html文件中需要引入jQuery的CDN链接,才能使用jquery。
dll
优化代码运行的性能
文件资源缓存(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