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 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
Vue通过懒加载提升页面响应速度
May 10 Vue.js
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
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
隐性调用php程序的方法
2015/06/13 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
动手学习无线电
2021/03/10 无线电
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
python实现连接mongodb的方法
2015/05/08 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python 学习教程之networkx
2019/04/15 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
python顺序执行多个py文件的方法
2019/06/29 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
策划主管的工作职责
2013/11/24 职场文书
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
物业接待员岗位职责
2015/04/15 职场文书
健康教育主题班会
2015/08/14 职场文书