代码分割
import _ from 'lodash'
import $ from 'jquery'
const dom = $('<div>')
dom.html(_.join(['a','b','c']))
$('body').append(dom)
- 修改
webpack.common.js进行代码分割
optimization: {
usedExports: true,//tree shaking
splitChunks: {
chunks: "all",
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
name: "vendors"
},
default: {
priority: -20,
reuseExistingChunk: true,
name: "common"
},
}
}
},
生产环境加入contenthash
// 将output的文件名内容拿走
output: {
path: path.resolve(__dirname, '../build'),// 绝对路径+bundle文件夹
}
// 开发环境直接使用name
output: {
filename: '[name].js',
chunkFilename: "[name].chunk.js"
}
// 生产环境增加contenthash
output: {
filename: '[name].[contenthash].js',
chunkFilename: "[name].[contenthash].chunk.js"
}
- 修改index.js的内容,打包后main.js的hash值发生了变化，但vendors没有变化，因此浏览器会使用之前缓存的vendors文件，下载新的main.js文件，提升了性能
