标签分类 技术文章:
当前位置:首页 > vue.js技术文章 > vue-cli项目优化方法- 缩短首屏加载时间

vue-cli项目中缩短首屏加载时间实例

  • 发布时间:
  • 作者:码农之家原创
  • 点击:178

这篇文章主要知识点是关于vue、cli、首屏加载慢、vue-cli项目优化、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue企业开发实战
  • 类型:Vue.js实战大小:109.6 MB格式:PDF出版:人民邮电出版社作者:肖睿
立即下载

更多Vue相关的学习资源可以参阅 Vue电子书程序设计电子书 等栏目。

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

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

大文件定位

我们可以使用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
})

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

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到vue状态管理模式vuex知识点、 Vue.js修饰符知识点详解、 vue:src文件路径错误问题及、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:vue App.vue中的公共组件改变值触发其他组件或.vue页面监听的实例

下一篇:element-ui中的select下拉列设置的实例代码

展开 +

收起 -

学习笔记
网友NO.842593

vue-cli 如何打包上线的方法示例

以vue创建的官方例子为例子,我们在开发环境的时候会 npm run dev ,生成 而想要打包成一份 很简单, 只需要 npm run build 这个命令 这两种命令的配置文件在config的index.js 一种是build 一种是dev ,而我们想要在本地查看打包后的成果,需要在assetsPublicPath 改变它的路径, 具体为什么,可以看index.html引入的文件路径 之后只需要放在服务器上运行就好了。 *常用技巧 1.如果在config - index.js 中的 build 代码中的 productionSourceMap的值设为false ,打包后文件体积可以减少百分之八十 2.如果设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true,即会使打包生成的index.html中的js和css路径带有?+随机字符串,也就是版本控制 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。 ……

网友NO.974786

使用Vue-cli 3.0搭建Vue项目的方法

1. 环境准备 1.1. 安装Node.js (建议使用LTS版本) 1.2. nrm安装及npm registry设置 // use npmnpm i nrm -g// use yarnyarn global add nrm 查看可用的npm源 nrm ls nrm查看npm源.png 切换npm源(以使用taobao为例) // 用法: nrm use ***nrm use taobao// 切换之后可用 nrm ls查看是否已经切换了npm源 nrm切换npm源.png 1.3. 安装yarn npm i yarn -g 1.4. 安装vue-cli 3.0 npm i @vue/cli -g 2. vue-cli搭建脚本文件 以搭建一个项目名称为vue-test的Vue前端项目为例 在终端输入以下命令 vue create vue-test 根据提示进行相应的配置(以手动配置为例): 2.1. 选择Manually select features vue-cli-0.png 2.2. 选择项目需要的一些特性(此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试,暂时不考虑端到端测试(E2E Testing)) vue-cli-1.png 2.3. 选择CSS预处理器语言,此处选择LESS vue-cli-2.png 2.4. 选择ESLint的代码规范,此处使用 Standard代码规范 vue-cli-3.png 2.5. 选择何时进行代码检测,此处选择在保存时进行检测 vue-cli-4.png 2.6. 选择单元测试解决方案,此处选择 Jest vue-cli-5.png 2.7. 选择 Babel、PostCSS、ESLint等配置文件存放位置,此处选择单独保存在各自的配置文件中 vue-cli-6.png 2.8. 配置完成后等待Vue-cli完成初始化 vue-cli-7.png 2.9. vue-cli初始化完成后,根据提示,进入到vue-test项目中……

网友NO.508032

vue-cli3+ts+webpack实现多入口多出口功能

最近公司有一个需求,需要在项目里面嵌套h5的页面,而且不止有一个嵌套的页面,那么就想办法运用webpack的多入口多出口的打包模式,网上查了很多资料,也有多入口多出口的案例,github上也有相应源码,我就不做过多讲解了。这里把博客贴出来vue多入口多出口打包,相应的多入口多出口的源码在 这里 。使用的是 vue2.x + webpack3.x 集成的多入口多出口,感兴趣的小伙伴可以看看。 然而,公司领导要求项目里面集成ts进行开发,对于字段的类型有更好的控制,所以在配合多入口多出口的前提下,还要配合ts进一步做一些调整。我本人开发路子可能前期走的野,反而加上tslint之后,被一堆类型检查,语法困扰,没法,要适应发展嘛。小女子只得从命。所以就做了一套在webpack3.x的基础上集成了ts,以及实现多入口多出口。当时时间比较紧张,从webpack3.x升级到webpack4.x,在实现上来说,还是遇到了一些困难。所以后面就没有继续研究了。 近期刚辞职,有一些时间然后也觉得webpack4.x发布也有1年多的时间了,还没有在项目中实战,不是一个合格的前端,终于下定决心要在webpack4.x上面指(hua)点(she)江(tian)山(zu)。 本文不对ts做一些解释,但是你如果要用ts做这个多入口的开发,那么请前往https://www.tslang.cn/docs/home.html,饱读经书 好吧!废……

网友NO.738992

使用vue-cli打包过程中的步骤以及问题的解决

1、打包命令是npm run build,这个命令实际上是在package.json中,scripts中build所对应的命令; 2、创建一个prod.server.js,这个文件不是必须的,这个文件的用处是在打包完毕之后,通过启动node.js本地服务来访问打包完成的静态文件,不需要的同学可以忽略这一点, prod.server.js文件代码示例: let express = require('express');let config = require('./config/index');// let axios = require('axios');let app = express();let apiRoutes = express.Router();app.use('/api', apiRoutes);app.use(express.static('./dist'));let port = process.env.PORT || config.build.port;module.exports = app.listen(port, (err) = { if (err){ console.error(err); return; } console.log('Listening at: http://localhost:'+port+'\n');}); 3、在index.html中使用scrip标签引入的js和使用link引入的css文件,全部改为在main.js中直接import;我目前main.js的代码示例: // The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import iView from 'iview'import 'iview/dist/styles/iview.css'import VueAwesomeSwiper from 'vue-awesome-swiper'import MuseUI from 'muse-ui'import 'muse-ui/dist/muse-ui.css'import 'src/base/css/libs/museui/muse-ui-fonts.css'import 'src/base/css/libs/museui/muse-ui-icons.css'import VueResource from 'vue-resource'import 'src/base/js/libs/waves/w……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明