代碼分割
import _ from 'lodash'
import $ from 'jquery'
const dom = $('<div>')
dom.html(_.join(['a','b','c']))
$('body').append(dom)
- 修改
webpack.common.js進(jìn)行代碼分割
optimization: {
usedExports: true,//tree shaking
splitChunks: {
chunks: "all",
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
name: "vendors"
},
default: {
priority: -20,
reuseExistingChunk: true,
name: "common"
},
}
}
},
生產(chǎn)環(huán)境加入contenthash
// 將output的文件名內(nèi)容拿走
output: {
path: path.resolve(__dirname, '../build'),// 絕對路徑+bundle文件夾
}
// 開發(fā)環(huán)境直接使用name
output: {
filename: '[name].js',
chunkFilename: "[name].chunk.js"
}
// 生產(chǎn)環(huán)境增加contenthash
output: {
filename: '[name].[contenthash].js',
chunkFilename: "[name].[contenthash].chunk.js"
}
- 此時(shí)打生產(chǎn)包文件名會有hash值
- 修改index.js的內(nèi)容,打包后main.js的hash值發(fā)生了變化介时，但vendors沒有變化鸵鸥，因此瀏覽器會使用之前緩存的vendors文件懂牧，下載新的main.js文件饶碘，提升了性能
