vue.config.js里面,像下面这样写的,会把js文件编译成一个个的chunk的js
// 不是dev的就不用编译出runtime
config
.when(process.env.NODE_ENV !== 'dev',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
// 下面就是把node_modules编译出lib
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // node_modules下面的第三方的库(除了elementUI的,elementUI的chunk在下面)
},
elementUI: {
name: 'chunk-elementUI', // 把elementUI拆分到一个单独的文件里面
priority: 20, // 这个的优先级高于lib
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single')
}
image.png
默认名称是不带hash值的(只有production的时候会),如果希望带hash值,把对于的env文件里面加上
NODE_ENV = production
image.png
网友评论