码迷,mamicode.com
首页 > 其他好文 > 详细

vue cli3 项目优化

时间:2019-10-13 12:57:23      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:guide   key   etc   代码   develop   提前   uil   asc   nbsp   

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; width: 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‘

 

vue cli3 项目优化

标签:guide   key   etc   代码   develop   提前   uil   asc   nbsp   

原文地址:https://www.cnblogs.com/benbentu/p/11665826.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!