今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小项目,确实是可以做服务端渲染,但是这个需要在服务器启动服务,当时我是用的docker,然后用node+nginx做了个容器,然后用pm2做进程守护. 后面我拿原来的Vue项目做了一个对比发现确实是加载速度要比原来的快很多. 后面我又发现有个预渲prerender-spa-plugin染的东西,然后早…

Vue项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢 一.路由的懒加载 路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载. 在router中,我们平时是这样引入组件的: import Foo from './Foo.vue' 文档中指出,如下定义一个能够被 Webpack 自动代码分割的异步组件 const Foo = () => imp…

一.项目优化策略 1.生成打包报告 2.第三方库启用CDN 3.Element-ui组件按需加载 4.首页内容定制 5.路由懒加载 1.生成打包报告 1.1通过vue-cli的UI面板直接查看 1.2通过命令行参数生成报告 // 生成report.html分析报告 vue-cli-service build --report 2.修改webpack配置 https://cli.vuejs.org/zh/config/#vue-config-js 如果有修改webpack默认配置的需求,可以在项目…

使用vue-cli构建的vue项目,在打包发布的时候,发现打包后的文件体积很大,使用webpack-bundle-analyzer分析后,发现占用空间最多的是引用的第三方依赖.第三方的依赖文件可以使用cdn外链的方式引入,这样就能大大缩小项目文件的体积.预防cdn链接失效,无缝切换本地文件 具体实现(以我个人项目为例)我的项目中引入了以下模块vue vue-router vuex axios moment highlight.js. 引入cdn文件我使用的是bootcdn其中moment.js需…

require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调函数 语法: require(dependencies: String[], [callback: function(...)]) 参数 dependencies: 模块依赖数组 callback: 回调函数 require-ensure 说明: require.ensure在需要的时候才下载依赖的…

一.减少打包的体积 通过vue-cli 初始化项目后,使用 npm run build 生成的JS文件往往会很大,加载时间过长导致页面长时间白屏,所以我们尽可能的使用一下方法来减少打包体积. 1.1 通过cdn 引入vue.js.vue-router 对于vue.js.vue-router.axios等静态文件来说,不需要我们去改动,就可以从cdn中引入.分两步进行: 第一步:在项目根路径的index.html中引入脚本 <script src="https://unpkg.com/vue…

工欲善其事必先利其器,安装所需环境 node和npm的安装 首先需要安装node环境,直接到官网下载安装包 https://nodejs.org/zh-cn/ 安装node默认安装npm, 不需要重复安装npm.安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功. 下载dev-tool工具 为了以后调式做准备 https://github.com/vuejs/vue-devtools#vue-devtools 安装全局vue-cli脚手架 np…

1. CSS在开发模式中用import,在打包后用CDN min.js中做如下操作 if (process.env.NODE_ENV == 'development') { require('../xxx.css'); }   index.html中引入相应UI的CDN   2. 减少vendor.js的体积 #2.1 提取js到外部,减小vendor.js体积 1. 在/build/webpack.base.conf.js中,增加externals: module.exports = { ex…

const login = () =>import('@/views/login'); export default new Router({ routes:[ { path:'/login', name:'login', component:login } ] }) 看到一遍博客列举了多种方式,我常用上面这种 https://blog.csdn.net/wp_boom/article/details/78799237…

cross-env 包环境 静态文件分离 require 是置顶的 双斜杠   //baidu.com可以是http也可以是https require.ensure打包到不同的文件中 项目文件路径规范 静态文件(不需要打包的文件)放在static路径下,同时静态文件使用es5语法,css原生语法…