webpack -- 长缓存优化

场景一: 改变业务代码, 第三方(vendor)不变化

解决:
1. 提取第三方代码
2. 将hash –> chunkhash
3. 提取 webpack runtime

var path = require('path')
var webpack = require('webpack')
module.exports = {
  entry:{
    main:'./src/foo',
    vendor:['vue'] //第三方JS代码
  },
  output:{
    path: path.resolve(__dirname,'dist'),
    filename:'[name].[chunkhash].js'
    // chunkHash: 打包好的包的hash值
  },
  plugins:[
    // 提取公共代码
    new webpack.optimize.CommonsChunkPlugin({
      name:'vendor',
      minChunks:Infinity
    }),
    // 提取 webpack runtime
    new webpack.optimize.CommonsChunkPlugin({
      name:'manifest'
    })
  ]
}

场景二: 引入新模块,模块的顺序变化, 第三方(vendor hash) 不变化

解决: 将打包的包用namequ区分而不用id
NamedChunksPlugin
NamedModulesPlugin

var path = require('path')
var webpack = require('webpack')
module.exports = {
  entry:{
    main:'./src/foo',
    vendor:['vue'] //第三方JS代码
  },
  output:{
    path: path.resolve(__dirname,'dist'),
    filename:'[name].[chunkhash].js'
    // chunkHash: 打包好的包的hash值
  },
  plugins:[
    // 将打包的包用namequ区分而不用id
    new webpack.NamedChunksPlugin(),
    new webpack.NamedModulesPlugin(),
    // 提取公共代码
    new webpack.optimize.CommonsChunkPlugin({
      name:'vendor',
      minChunks:Infinity
    }),
    // 提取 webpack runtime
    new webpack.optimize.CommonsChunkPlugin({
      name:'manifest'
    })
  ]
}

场景三: 动态引入模块 第三方(vendor hash)不变化

解决:定义动态模块的chunkName

import(/*webpackChunkName:'sync'*/'./sync').then(()=>{ ... })