vue cli3 项目优化
Posted benbentu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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; 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 项目优化的主要内容，如果未能解决你的问题，请参考以下文章