由于最近开发个人博客（Vue+node），在使用过程中发现网络加载有点慢，打算优化一次。本次优化的目标是：index.html设置为no-cache，这样每次请求都会比较index.html文件是否发生变化。如果没有变化，将使用缓存。如果有变化，将使用新的index.html。文档。其他所有文件都会使用长缓存，比如设置缓存一年maxAge:1000*60*60*24*365前端代码用webpack打包，根据内容生成对应的文件名文件。每次重新打包时，文件名只会在内容发生变化时发生变化。结合以上三点可以实现文件的精准缓存。也就是说，一年之内，如果我的个人博客没有更新，同一台电脑在此期间访问该网站时不会发起任何请求；如果一个文件被更新，它只会请求一个新文件，旧文件仍然从缓存中读取。Tips:max-age：设置缓存存储的最大期限，超过这个期限缓存被认为过期（以秒为单位）。在此之前，浏览器不会重新请求读取文件，而是直接使用缓存。指定no-cache意味着客户端可以缓存该资源，每次使用缓存资源前都必须重新验证其有效性。Webpack根据文件内容打包并生成文件名。这个要求可以通过配置输出的文件名属性来实现。filename属性的value选项中有一个[contenthash]，它会根据文件内容创建一个唯一的hash。当文件内容改变时，[contenthash]也会改变。output:{filename:'[name].[contenthash].js',chunkFilename:'[name].[contenthash].js',path:path.resolve(__dirname,'../dist'),},提取第三方库因为导入的第三方库一般都比较稳定，不会经常变动。所以将它们单独提取出来作为长期缓存是更好的选择。这里需要用到webpack4的splitChunk插件cacheGroups选项。optimization:{runtimeChunk:{name:'manifest'//将webpack的运行时代码拆分成一个单独的块。},splitChunks:{cacheGroups:{vendor:{name:'chunk-vendors',test:/[\\/]node_modules[\\/]/,priority:-10,chunks:'initial'},common:{name:'chunk-common',minChunks:2,priority:-20,chunks:'initial',reuseExistingChunk:true}},}},test：用来控制哪些模块被这个缓存组匹配。如果不加改动，默认选择所有模块。可以传递的值类型：RegExp、String、Function；priority：表示提取权重，数字越大，优先级越高。因为一个模块可能满足多个cacheGroup的条件，权重最高的才说了算提取哪一个；reuseExistingChunk：表示是否使用已有的chunk，如果为true，表示如果当前chunk中包含的模块已经被提取出来，则不会重新生成新的。minChunks(defaultis1):thiscodeblocksplitting前最少被引用的次数):initial,asyncandallname(打包后的chunks的名字):stringorfunction(function可以根据条件自定义名字)).除了抽取第三方库，结合vue和import动态引入组件也可以实现按需加载。expresssetapp.use((req,res,next)=>{//将index.html设置为无缓存if(req.url=='/'){res.setHeader('Cache-control','no-cache')}next()})app.use(express.static('dist',{etag:false,maxAge:1000*60*60*24*365,//缓存一年}))//设置dist为根目录的详细代码可以看我的个人博客项目。参考webpack缓存一步步理解webpack4的splitChunk插件
