网页优化-资源加载

使用 Preload&Prefetch 优化前端页面的资源加载

1. 安装 @vue/preload-webpack-plugin 插件

2. vue.config.js 引用

   const PreloadPlugin = require('@vue/preload-webpack-plugin')
   

3. 插件配置 fileWhitelist 正则限制文件 include 过滤的文件范围， allAssets 所有文件

   configureWebpack: (config) => {
    const pre = new PreloadPlugin({
            fileWhitelist: [/demo/],
            include: 'allAssets'
    }) 
    config.plugins.push(pre)
    }
   

4. 代码使用

   <img src="../assets/demo.jpg" alt="">