webpack学习第十五步—— 浏览器缓存-contenthash

代码分割

  • index.js引入三方库
import _ from 'lodash'
import $ from 'jquery'

const dom = $('
') 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

  • 修改webpack.common.js
// 将output的文件名内容拿走
output: {
    path: path.resolve(__dirname, '../build'),// 绝对路径+bundle文件夹
}
  • 修改webpack.dev.js
// 开发环境直接使用name
output: {
    filename: '[name].js',
    chunkFilename: "[name].chunk.js"
}
  • 修改webpack.prod.js
// 生产环境增加contenthash
output: {
    filename: '[name].[contenthash].js',
    chunkFilename: "[name].[contenthash].chunk.js"
}
  • 此时打生产包文件名会有hash值
  • 修改index.js的内容,打包后main.js的hash值发生了变化,但vendors没有变化,因此浏览器会使用之前缓存的vendors文件,下载新的main.js文件,提升了性能

你可能感兴趣的:(webpack学习第十五步—— 浏览器缓存-contenthash)