qq_35413855的博客

前言使用vue、react、angular等技术开发过程中，我们都会遇到以下问题： 首屏加载慢（这个单页面原因引起的，如果真的很在乎，可以考虑服务端渲染） 每一次更新都需要清除浏览器缓存才能看到效果(经常被测试吐槽) 这两个问题可以从很多方面进行优化，今天我就从前端页面部署阶段来优化一下这两个问题。PS：以下内容都基于vue-cli3+。前端页面文件缓存方案从vue-cli3打包说起路由使用按需加载后，打包生成的文件，每一个路由页面都对应一个js和css文件，入口mai.

啊啊

import axios from "axios";import { MessageBox, Message } from "element-ui";import store from "@/store";import { getToken } from "@/utils/auth";// 1. 创建axios实例const service = axios.create({ // url基础地址，解决不同数据源url变化问题 // api/xxx baseURL: proc.

permision.js// 做全局路由import router from "./router";import store from "./store";import { getToken } from "@/utils/auth"; // 从cookie获取令牌const whiteList = ["/login"];router.beforeEach(async (to, from, next) => { const hasToken = getToken(); .

初始化在new Vue()时会调用_init()进行初始化，会初始化各种实例方法、全局方法、执行⼀一些⽣命周期、初始化props、data等状态。其中最重要的是data的「响应化」处理。初始化之后调用$mount挂载组件，主要执行编译和首次更新编译编译模块分为三个阶段1. parse：使用正则解析template中的vue的指令(v-xxx) 变量等形成抽象语法树AST2. optimize：标记一些静态节点，用作后面的性能优化，在diff的时候直接略略过3. generate：..

render函数详解一些场景中需要 JavaScript 的完全编程的能力，这时可以⽤用渲染函数，它比模板更接近编译器。// <div id="box" class="foo"><span>aaa</span></div>Vue.component("comp", { // template:'<div id="box" class="foo"><span>aaa</span></div>', （不

动态路由利⽤用$router.addRoutes()可以实现动态路路由添加，常⽤用于⽤用户权限控制。// router.js// 返回数据可能是这样的//[{ // path: "/", //name: "home", // component: "Home", //Home//}]// 异步获取路路由api.getRoutes().then(routes => { const routeConfig = routes.map(rou

1.实现注意事项递归组件是可以在它们⾃自⼰己模板中调⽤用⾃自身的组件// Node.vue<template> <div> <h3>{{data.title}}</h3> <!-- 必须有结束条件 --> <Nodev-for="d in data.children":key="d.id":data="d"></Node> </div></template><s.

1.样式就先不写了，各位同志自己来吧2.创建creat.js文件，创建弹窗的方法// 创建指定组件实例并挂载于body上import Vue from 'vue';export default function create(Component, props) { // 0. 先创建vue实例 const vm = new Vue({ render(h) { // render方法提供给我们一个h函数，它可以渲染VNode（虚拟do..

1.input自定义组件要实现双向绑定（v-model）这个语法糖得需要实现这俩个东东：@input、:value派发效验事件<template> <div> <input :value="value" @input="onInput" v-bind="$attrs"> //v-bind="$attrs" 结构父组件传来的除props之外的属性 </div></template>&l

1.组件传值、通信属性props// childprops: { msg: String }// parent<HelloWorld msg="Welcome to Your Vue.js App"/>引用refs// parent<HelloWorld ref="hw"/>this.$refs.hw.xx = 'xxx'子组件chidren// parentthis.$children[0].xx = 'xxx'子组件 =>

constpath=require("path");functionresolve(dir){returnpath.join(__dirname,dir);}constport=8080;//端口号constIS_PRODUCTION=process.env.NODE_ENV=="production";//正式环境constCompressionPlugin=require("compression-webpack-plugin"...