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

代码分割

• index.js引入三方库

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

• 修改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文件，提升了性能