-
vite对比webpack的启动速度提升在哪里？
webpack 原理图 vite 原理图 webpack webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。 vite vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。 优势： 由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。 vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像w…- 725
- 0
-
Vite 和Webpack 的核心对比？
全方位对比vite和webpack 一. webpack原理 1. webpack打包过程 1.识别入口文件 2.通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖） 3.webpack做的就是分析代码。转换代码，编译代码，输出代码 4.最终形成打包后的代码 2. webpack打包原理 1.先逐级递归识别依赖，构建依…- 677
- 0
-
前端JS、CSS版本控制
前言 最近面试，问道js,css版本控制问题，一时间忘记，没答上来，下来查阅资料，整理一下。 问题 用户 首次 通过浏览器打开网页时都会对 JS、CSS 文件 进行缓存，以便在下次打开时可以直接从缓存中取出，而不用重复地向服务器 再次请求；当用户再次通过浏览器浏览某个网页，浏览器在加载网页中包含的各个资源（JS、css、图片）时，先会判断缓存中是否已经包含了此资源（当然这与Header中定义的Ca…- 598
- 0
-
2021年web前端面试集锦
一. HTML、CSS相关 html5新特性、语义化 语义化标签 ： header nav main article section aside footer 语义化意味着顾名思义，HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构，如 header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。 语义化的优点有: 代码结构清晰，易于阅读，利于开发和…- 1.1k
- 0
-
vue实现路由懒加载几种方式
一、为什么需要路由懒加载 vue在项目打包之后，会生成一个dist文件夹。在dist文件夹里面又有一个js/app.js文件，这里主要存放的是整个项目的业务逻辑代码。随着项目不断的开发迭代，业务逻辑越来越多，app.js文件也会越来越大。在线上就会容易出现进入首页时所需时间过长或者出现白屏的问题。 使用路由懒加载可以分割代码，提高初始页的加载效率。 二、路由懒加载的方式 1、使用ES6的impor…- 806
- 0
-
Vue项目优化首页加载速度
一、路由懒加载 { path: '/index', component: () => import('@/views/index'), //懒加载-访问该页面才加载 } 这一步之后，打包后会发现很大的chunk-vendors.xxxxxxx.js不见了，其实是分成了不同的js文件 二、使用CDN引入 <script src="http…- 833
- 0
-
Vue SEO的四种方案
众所周知，Vue SPA单页面应用对SEO不友好，当然也有相应的解决方案，通过查找资料，大概有以下4种方法。 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 关于服务器渲染：Vue官网介绍 ，对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境。 使用SSR权衡之处： 开发条件所限，浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；一些外…- 995
- 0
-
vue-cli3构建H5移动应用（vant+rem）
安装 cli3.x 版本 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过以下命令卸载它。 npm uninstall vue-cli -g 或 yarn global remove vue-cli 然后可以使用下列任一命令安装这个新的包： npm install -g @vue/…- 2.4k
- 0
-
微信小程序mpvue+Vant Weapp初始化
准备工作： 1.安装Node.js nodejs官网 //可查看node版本 $ node -v $ npm -v 2.安装淘宝镜像cnpm $ npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装vue-cli脚手架构建工具 $ cnpm install -g vue-cli 第一步、创建一个基于 mpvue-qu…- 985
- 0
-
vue:将px转化为rem，适配移动端vant-UI等框架(postcss-pxtorem)
1.下载lib-flexible 使用的是vue-cli+webpack，通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签 <meta name="viewport"…- 1k
- 0
-
Vue取消eslint语法限制
1.出现警告 由于vue对语法的限制过于严格，以至于在编译运行的时候一直编译失败，当然也包括一些警告： 类似: clipboard.png 2.关闭方法： 在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则 clipboard.png 然后重新运行一下npm run dev或者构建命令 npm run build就…- 831
- 0
-
webpack+vue初始化项目
第1步：官网下载并安装nodejs nodejs官网:http://nodejs.cn/download/ 第2步：npm下载插件速度很慢，推荐安装淘宝镜像cnpm $ npm install -g cnpm --registry=https://registry.npm.taobao.org 第3步：创建项目 ①安装vue-cli脚手架构建工具 cnpm install -g vue-cli ②…- 808
- 0
-
webpack配置proxy反向代理，解决跨域问题
目的：为了解决前端和后端联调数据，出现的跨域问题,通过配置反向代理，可以更好的联调数据 常见跨域场景 (1)同一域名，不同端口 http://www.nsdn.cn:8000/a.js http://www.nsdn.cn/b.js (2)同一域名，不同协议 http://www.nsdn.cn/a.js https://www.nsdn.cn/b.js (3)域名和域名对应相同ip http:/…- 2.5k
- 0
-
yarn和npm的区别、–save和–save-dev的区别
一、安装yarn (1)下载node.js,使用npm安装 npm install -g yarn (2)查看版本 yarn --version (3)yarn淘宝源安装 yarn config set registry https://registry.npm.taobao.org -g yarn config set sass_binary_site http://cdn.npm.taobao…- 1.9k
- 0
-
从0到1搭建webpack2+vue2自定义模板详细教程
前言 webpack2和vue2已经不是新鲜东西了，满大街的文章在讲解webpack和vue，但是很多内容写的不是很详细，对于很多个性化配置还是需要自己过一遍文档。Vue官方提供了多个vue-templates，基于vue-cli用的最多，不过对于很多人来说，vue-cli 的配置还是过于复杂，对于我们了解细节实现不是很好，所以想自己从零开始搭建一个模板工程，也顺便重新认识一下webpack和vu…- 1k
- 0
-
vue-router嵌套子路由实际使用
前端路由的定义 在spa流行之前，前端路由是没有的；而像java之类的后台语言很早就有了，后端路由一般就是定义一系列的访问地址规则，路由引擎根据这些规则匹配并找到对应的处理页面，然后将请求转发给页面进行处理。在spa应用中，前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种做法，一是在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航；二是…- 826
- 0
-
webpack介绍、配置、使用
一、webpack介绍 1、由来 由于前端之前js、css、图片文件需要单独进行压缩和打包，这样团队人员处理很繁琐，然后 Instagram 团队就想让这些工作自动化，然后webpack应运而生。 2、介绍 webpack是一个模块打包器（module bundler），webpack视HTML，JS，CSS，图片等文件都是一种 资源 ，每个资源文件都是一个模块（module）文件，webpack…- 785
- 0
-
Vue项目骨架屏注入实践
相比于早些年前后端代码紧密耦合、后端工程师还得写前端代码的时代，如今已发展到前后端分离，这种开发方式大大提升了前后端项目的可维护性与开发效率，让前后端工程师关注于自己的主业。然而在带来便利的同时，也带来了一些弊端，比如首屏渲染时间(FCP)因为首屏需要请求更多内容，比原来多了更多HTTP的往返时间(RTT)，这造成了白屏，如果白屏时间过长，用户体验会大打折扣，如果用户网速差，则FCP会更长。 由此…- 935
- 0
-
webpack 多页面配置
注意 弃用 npm run build & npm run dev & npm run dll改成 box build & box dev & box dlllink npm link 将 box 命令链接到全局 本章内容 使用改造为脚手架多页面配置 使用 box build # 不加参数则会编译所有页面，并清空 distbox dev…- 826
- 0
-
Vue 配置生产环境、测试环境和开发环境的请求
1、在config下面配置test.env.js 、pro.env.js、dev.env.js 这里面的配置得用双引号包着，不然会报错，打包不通过的 2、config中的index.js 文件中build.修改： 3、在build中webpack.prod.conf.js做如下修改 4、在 build下面的webpack.base.conf.js改变 主要是因为公司部署环境打包之后资源文件会多个i…- 807
- 0
-
前端Vue项目经验汇总
面显示 头部左右两边可以通过slot卡槽去处理底部导航显示与否可以通过路由里面的meta属性进行配置 返回上一级页面$router.back()$router:路由器对象，包含一些操作路由的功能函数，来实现编程式导航（路由跳转）$route:当前路由对象，一些当前路由信息数据的容器，path/meta/query/params 异步请求数据 axios请求数据封装 /* 封装请求函数 返回值：pr…- 1k
- 0
-
vue-cli3项目搭建配置以及性能优化
项目初始化 注意：安装前请确保有安装node.js，并且node>=8.9 全局安装vue npm install -g @vue/cli 如果之前安装了vue旧版本，查看vue --version 创建项目 vue create vue-cli3-init(项目名) 注：名称不能采用驼峰 vue-cli3也可以采用UI面板进行配置，相对比较方便，目前先写命令行创建，后续再加上面板创建。 …- 760
- 0
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×