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 相关文章推荐
Dom与浏览器兼容性说明
Oct 25 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
基于Vue的侧边目录组件的实现
Feb 05 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
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
php截取字符串函数分享
2015/02/02 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
javascript数组快速打乱重排的方法
2014/01/02 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
js常见遍历操作小结
2019/06/06 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
python实现的防DDoS脚本
2011/02/08 Python
Python中处理时间的几种方法小结
2015/04/09 Python
python实现SMTP邮件发送功能
2020/06/16 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Python占用的内存优化教程
2019/07/28 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
python数据分析:关键字提取方式
2020/02/24 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
应用化学专业职业生涯规划书
2013/12/31 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
党员评议个人总结
2014/10/20 职场文书
论群众路线学习笔记
2014/11/06 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
西安导游词
2015/02/12 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python