生产环境性能优化
oneOf
以下loader只会匹配一个,减少文件被匹配的次数,提高构建速度
module:{{
oneof:[{ // 打包样式资源
test:/\.css$/g, // 匹配哪些文件
use:['style-loader', 'css-loader'], // 使用哪些loader处理文件
},{ // 处理图片资源,默认不能处理html中的图片
test:/\.(jpg|png|gif)$/,
loader:'url-loader', // 下载url-loader、file-loader
options:{
limit: 8 * 1024, // 图片小于8kb就会被base64处理,优点:减少请求次数;缺点:图片体积更大, url-loader使用ES6module,而html-loader引入图片是commonjs
esModule:false, // 关闭ES6module,使用commonjs解析
name:'[hash:10].[ext]', // 重命名,[hash:10]取图片的hash值的前10位,[ext]取原图片的扩展名
outputPath:'imgs'
}
},{
test:/\.html$/,
loader:'html-loader', // 处理html-loader中的图片(负责引入img,从而能被url-loader处理)
},{
exclude:/\.(css|js|html)$/, // 处理除css、js、html的其他资源
loader:'file-loader',
options:{
name:'[hash:10].[ext]',
outputPath:'media'
}
}]
}}
babel缓存
output:{
filename:'./src/index.[hash:10].js' // 文件缓存
},
module:{
ruels:[{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
options:{
presets:['@babel/preset-env'], // 只需要在js文件中引入即可,这种方式是代码文件太大
cacheDirectory:true // 开启babel缓存
}
}]
}
babel缓存:让第二次打包速度更快
文件资源缓存:通过修改文件名,例如加一个hash值,webpack每次构建都会生成唯一的hash值
chunkhash:根据chunk生成hash值,如果打包来源于 同一个chunk那么hash值一样
contenthash:根据文件的内容生成hash,不同文件hash值不一样。让代码上线运行缓存更好使用
多进程打包
多进程打包,提高打包速度
module:{
ruels:[{
test:/\.js$/,
exclude:/node_modules/,
use:[
// 'thread-loader', // 开启多进程打包,进程通信也有开销,只有工作消耗时间比较长才需要多进程打包
{
loader:'thread-loader',
options:{
workers:2 // 进程2个
}
}
]
}]
}
externals
禁止指定的模块打包
externals:{
// 忽略名,npm包名 拒绝jQuery包被打包
jquery:'jQUery'
}
dll
动态库打包
使用dll技术对某些库进行单独打包(第三方库:jquery、vue)
当运行webpack时,默认查找webpack.config.js配置文件
需要运行 webpack.dll.js
webpack --config webpack.dll.js
// webpack.dll.js
entry:{
jquery:['jquery']
},
output:{
filename:'[name].js',
path:path.resolve(__dirname, 'dll'),
library:'[name]_[hash]' // 打包的库里面向外暴露出去的内容叫什么名字
},
plugins:[
// 打包生成一个manifest.json --> 提供和jquery映射
new webpack.DllPlugin({
name'[name]_[hash]', // 映射库的暴露的内容名称
path:path.resolve(__dirname, 'dll/manifest.json') // 输出文件路径
}),
]
配置webpack配置文件
// webpack.config.js
plugins:[
new webpack.DllRenferencePlugin({
manifest:path.resolve(__dirname, 'dll/manifest.json')
}),
new AddAssetHtmlWebpackPlugin({
filePath:path.resolve(__dirname, 'dll/jquery.js')
})
]
tree shaking
目的:去除无用代码
前提条件:1. 必须使用ES6模块 2. 开启production
在package.json中配置
{"sideEffects":false}
所有代码都没有副作用,都可以使用tree shaking。可能会把css、babel文件干掉
{ "sideEffects":["*.css"]}
css文件不会被tree shaking
code split
目的: 把一个文件分割成多个文件,减少单个文件加载的时间
第一种方式:需要频繁的更改配置文件,配置多个入口
entry:{
main:'./src/index.js',
test:'./src/test.js'
},
output:{
filename:'js/[name].[contenthash:10].js' // [name]取文件名
chunkFilename:'js/[name].[chunkhash].js'
}
第二种方式:只需要配置一个入口
entry:'./src/index.js',
optimization:{
splitChunks:{
chunks:'all'
}
}
将node_modules单独打包成一个chunk
自动分析多入口chunk中,有没有公共的文件,如果有会打包成单独一个chunk
在单入口的情况下使用js代码,让某一个文件被单独打包成一个chunk
import(/* webpackChunkName: 'test'*/'./test').then(res => {
});