场景一: 改变业务代码, 第三方(vendor)不变化
解决:
1. 提取第三方代码
2. 将hash –> chunkhash
3. 提取 webpack runtime
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry:{
main:'./src/foo',
vendor:['vue'] //第三方JS代码
},
output:{
path: path.resolve(__dirname,'dist'),
filename:'[name].[chunkhash].js'
// chunkHash: 打包好的包的hash值
},
plugins:[
// 提取公共代码
new webpack.optimize.CommonsChunkPlugin({
name:'vendor',
minChunks:Infinity
}),
// 提取 webpack runtime
new webpack.optimize.CommonsChunkPlugin({
name:'manifest'
})
]
}
场景二: 引入新模块,模块的顺序变化, 第三方(vendor hash) 不变化
解决: 将打包的包用namequ区分而不用id
NamedChunksPlugin
NamedModulesPlugin
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry:{
main:'./src/foo',
vendor:['vue'] //第三方JS代码
},
output:{
path: path.resolve(__dirname,'dist'),
filename:'[name].[chunkhash].js'
// chunkHash: 打包好的包的hash值
},
plugins:[
// 将打包的包用namequ区分而不用id
new webpack.NamedChunksPlugin(),
new webpack.NamedModulesPlugin(),
// 提取公共代码
new webpack.optimize.CommonsChunkPlugin({
name:'vendor',
minChunks:Infinity
}),
// 提取 webpack runtime
new webpack.optimize.CommonsChunkPlugin({
name:'manifest'
})
]
}
场景三: 动态引入模块 第三方(vendor hash)不变化
解决:定义动态模块的chunkName
import(/*webpackChunkName:'sync'*/'./sync').then(()=>{ ... })