vue-cli项目优化方法- 缩短首屏加载时间


Posted in Javascript onApril 01, 2018

最近实习的项目需求上要求不多,就学了下项目优化,主要是首屏加载太慢。

大文件定位

我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解决过大的js文件。

安装

npm install --save-dev webpack-bundle-analyzer

在webpack中设置如下,然后npm run dev 的时候默认会在8888端口显示。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
 plugins: [
  new BundleAnalyzerPlugin()
 ]
}

JS文件按需加载

如果没有这个设置,项目首屏加载时会加载整个网站所有的JS文件,所以将JS文件拆开,点击某个页面时再加载该页面的JS是一个很好的优化方法。

这里用到的就是vue的组件懒加载。在router.js中,不要使用import的方法引入组件,使用require.ensure。

import index from '@/components/index'
const index = r => require.ensure( [], () => r (require('@/components/index'),'index'))
//如果写了第二个参数,就打包到该`/JS/index` 的文件中。
//不写第二个参数,就直接打包在`/JS` 目录下。
const index = r => require.ensure( [], () => r (require('@/components/index')))

使用cdn

打包时,把vue、vuex、vue-router、axios等,换用国内的bootcdn 直接引入到根目录的index.html中。

在webpack设置中添加externals,忽略不需要打包的库。

externals: { 
 'vue': 'Vue', 
 'vue-router': 'VueRouter', 
 'vuex': 'Vuex', 
 'axios': 'axios' 
}

在index.html中使用cdn引入。

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script> 
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script> 
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

将JS文件放在body的最后

默认情况下,build后的index.html中,js的引入是在header中。

使用html-webpack-plugin插件,将inject的值改成body。就可以将js引入放到body最后。

var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
   inject: 'body',
})

压缩代码并移除console

使用UglifyJsPlugin 插件来压缩代码和移除console。

new webpack.optimize.UglifyJsPlugin({
 compress: {
  warnings: false,
  drop_console: true,
  pure_funcs: ['console.log']
 },
 sourceMap: false
})

暂时只查到了这几个优化方法。

Javascript 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 #Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 #Javascript
对Angular中单向数据流的深入理解
Mar 31 #Javascript
jQuery中复合选择器简单用法示例
Mar 31 #jQuery
jQuery中内容过滤器简单用法示例
Mar 31 #jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 #jQuery
Postman模拟发送带token的请求方法
Mar 31 #Javascript
You might like
ThinkPHP分页类使用详解
2014/03/05 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
php实用代码片段整理
2016/11/12 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
window下eclipse安装python插件教程
2017/04/24 Python
python破解zip加密文件的方法
2018/05/31 Python
Python中按值来获取指定的键
2019/03/04 Python
python MD5加密的示例
2020/10/19 Python
python 模拟登录B站的示例代码
2020/12/15 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
高中毕业生生活的自我评价
2013/12/08 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
Python中可变和不可变对象的深入讲解
2021/08/02 Python
一条 SQL 语句执行过程
2022/03/17 MySQL
浅谈Redis的事件驱动模型
2022/05/30 Redis