性能优化

85 阅读1分钟

10.26

问题现象:

当做一次发版(源站资源更新了),而客户端无法立即获取到最新的资源,需要清除浏览器的缓存。

原因:

项目中打包出来的js、css等静态资源,在webpack打包的时候文件名是不变的,在访问的时候,会先对比边缘节点服务器中的缓存,如果没有变化,则直接使用缓存中的内容。

处理方法:

对于项目打包出来的js、css等静态资源,在打包的时候使用文件hash命名

js文件
output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[hash].js'),
  chunkFilename: utils.assetsPath('js/[id].[hash].js')
}
css文件
   plugins: [
   new ExtractTextPlugin({
   filename: utils.assetsPath('css/[name].[contenthash].css'),
   allChunks: true,
  })]
}

参考一

参考二