D1:前端性能优化方案
实践总结教程
柒个M
兴趣是最好的老师!!!
展开
-
Vue中echarts的引入方法:
项目使用的是Vue-cli脚手架搭建1、安装echarts依赖npm install echarts -S或者使用国内的淘宝镜像:安装:npm install -g cnpm --registry=https://registry.npm.taobao.org使用:cnpm install echarts -S2、全局引入main.js文件中:// 引入echartsimport echarts from 'echarts'Vue.prototype.$原创 2020-10-13 09:55:09 · 2241 阅读 · 0 评论 -
elementUI全局引入改为局部引入
版本说明:Vue版本:@vue/cli 4.4.6webpack版本:4.41.1node版本:v11.12.0项目需要优化首页加载速度,所以需要把全局引入改为局部引入,百度加上自己的摸索,最后修改成功,记录一下,希望能够对别人有点启发:1、安装 babel-plugin-component:npm install babel-plugin-component -D2、创建一个文件,里面是我们需要的组件import { Link, Divider,} fro.原创 2020-09-07 14:55:06 · 2844 阅读 · 0 评论 -
Vue项目性能分析工具--webpack-bundle-analyzer
在优化项目的时候,每次打包后只知道包文件大,却不知道那个文件大,那个文件还有优化的空间,所以,推荐一款工具,只要在项目中安装配置一下,便可以一目了然的呈现出打包后资源所占的比例,接下来上教程:我的项目是基于Vue-Cli4.0的,不同版本对应不同的配置文件呦;1、安装webpack-bundle-analyzernpm install webpack-bundle-analyzer --save-dev2、在Vue.config.js文件中配置:const BundleAnalyze原创 2020-09-28 13:57:54 · 4696 阅读 · 3 评论 -
SEO优化Vue项目
项目要求项目首页时间峰值不能超过5s,之前的项目一般要求的都是平均值5s,挑战有点大,尝试了各种优化方法后,项目响应时间降到了5.3s,但是革命尚未成功,同志们还得努力呀!今天尝试使用SEO优化项目,去网上学习了一波,加上实践后,打包成功,分享下具体操作步骤:本次只介绍vue-cli3的解决方案使用 webpack +prerender-spa-plugin+ vue-meta-info轻松地添加预渲染1、安装 prerender-spa-plugin --savenpm inst..原创 2020-09-27 13:54:36 · 495 阅读 · 0 评论 -
Vue项目优化之图片懒加载vue-lazyload
1、首先安装vue-lazyloadnpm i vue-lazyload -S2、在main.js中引入import Vue from 'vue'import App from './App.vue'import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// or with optionsVue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png',原创 2020-09-27 11:15:42 · 453 阅读 · 0 评论 -
Vue-Cli4.0 使用UglifyJsPlugin压缩代码
1、安装UglifyJsPlugin:npm install UglifyJsPlugin --save -dev2、在vue.config.js中引入:// 代码压缩const UglifyJsPlugin = require('uglifyjs-webpack-plugin')3、在configureWebpack中配置:configureWebpack: { // 代码压缩 plugins: [ new UglifyJsPlugin({原创 2020-09-23 13:47:12 · 4069 阅读 · 2 评论 -
Vue-Cli4.0 开启gzip压缩
1、首先安装compression-webpack-pluginnpm install compression-webpack-plugin --save -dev2、在Vue.config.js文件中配置:const CompressionWebpackPlugin = require('compression-webpack-plugin')const productionGzipExtensions = ['js', 'css']configureWebpack: {原创 2020-09-22 16:57:29 · 1476 阅读 · 0 评论 -
Vue-Cli4.0及以上使用 image-webpack-loader 压缩图片优化项目
1、安装image-webpack-loadernpm install image-webpack-loader --save -dev2、在项目打包时报错,所以先卸载然后使用cnpm进项安装npm uninstall image-webpack-loader使用cnpm进行安装,亲测成功3、安装 cnpm 然后将全局的 registry 设置成阿里的镜像,国内阿里比较快npm install cnpm -g --registry=https://registry.npm...原创 2020-09-22 16:52:28 · 2161 阅读 · 1 评论 -
Vue项目性能优化实践
我勒个去,之前从来没有优化过项目,真的是一边摸索,一边实践,简直要吐血了。 个人感觉:项目优化要整体把控项目,每个配置和组件都应该做到心中有数,不说精通,但是要知道那些配置是干嘛用的! 废话不多说,我用的vue版本是:vue-cli4.0以上,没有build文件夹,项目只提供了两个配置文件:babel.config.js 和 vue.config.js,好像项目中没有这些文件,可以按照官网配置自己建。 首先,我打完包后发现dist包竟然超过了2M多,这怎么能行,开始发功...原创 2020-09-22 10:31:43 · 509 阅读 · 0 评论