zoukankan      html  css  js  c++  java
  • vue cli3 项目优化

    vue-cli3 Prefetch (官网内容)

    <link rel="prefetch"> 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容。

    默认情况下,一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import()按需 code splitting 的产物) 自动生成 prefetch 提示。

    这些提示会被 @vue/preload-webpack-plugin 注入,并且可以通过 chainWebpack 的 config.plugin('prefetch') 进行修改和删除。

    示例:

    // vue.config.js
    module.exports = {
      chainWebpack: config => {
        // 移除 prefetch 插件
        config.plugins.delete('prefetch')
    
        // 或者
        // 修改它的选项:
        config.plugin('prefetch').tap(options => {
          options[0].fileBlacklist = options[0].fileBlacklist || []
          options[0].fileBlacklist.push(/myasyncRoute(.)+?.js$/)
          return options
        })
      }
    }

    当 prefetch 插件被禁用时,你可以通过 webpack 的内联注释手动选定要提前获取的代码区块:

    import(/* webpackPrefetch: true */ './someAsyncComponent.vue')
    

    webpack 的运行时会在父级区块被加载之后注入 prefetch 链接。

    提示

    Prefetch 链接将会消耗带宽。如果你的应用很大且有很多 async chunk,而用户主要使用的是对带宽较敏感的移动端,那么你可能需要关掉 prefetch 链接并手动选择要提前获取的代码区块。

    基本优化

    路由懒加载 router.js

    const HomePage = () => import(/* webpackChunkName: "HomePage", webpackPrefetch: true */ 'views/homepage/index.vue')
    routes: [
        {
          path: '*',
          name: 'HomePage',
          component: HomePage,     
        },
     

    CDN加速

    <!DOCTYPE html>
    <html lang="en" style=" height: 100%;">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0">
        <title>理财商城</title>
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <link rel="stylesheet" href="./reset.css ">
        <link rel="stylesheet" href="./font/font.css ">
        
        <script type="text/javascript" src="./dprFlex.js"></script>
      </head>
      <body style="position: relative;  100%; height: 100%; overflow: hidden;background:#F1F1F2">
        <div id="app"></div>
        <!-- built files will be auto injected -->
        <script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script>
        
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
        <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
        
        <script>
    
          // eruda.init();
          // var vConsole = new VConsole();
        </script>
      </body>
    </html>

    vue.config.js

    configureWebpack: {
        externals: {
          'vue': 'Vue',
          'vuex': 'Vuex',
          'vue-router': 'VueRouter',     
          'Axios':'axios',
          'moment': 'moment'
        }
      },

    min.js

    import Vue from 'vue'
    import App from './App.vue'
    
    import router from './router/index'
    import Vuex from 'vuex'
    import moment from 'moment'
  • 相关阅读:
    HBase 高性能加入数据
    Please do not register multiple Pages in undefined.js 小程序报错的几种解决方案
    小程序跳转时传多个参数及获取
    vue项目 调用百度地图 BMap is not defined
    vue生命周期小笔记
    解决小程序背景图片在真机上不能查看的问题
    vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化
    vue项目 一行js代码搞定点击图片放大缩小
    微信小程序进行地图导航使用地图功能
    小程序报错Do not have xx handler in current page的解决方法
  • 原文地址:https://www.cnblogs.com/benbentu/p/11665826.html
Copyright © 2011-2022 走看看