当前位置:主页 > vue.js教程 > vue-cli项目优化方法- 缩短首屏加载时间

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

发布:2019-09-30 16:56:15 178


本站精选了一篇相关的编程文章,网友充宏大根据主题投稿了本篇教程内容,涉及到vue、cli、首屏加载慢、vue-cli项目优化、vue-cli项目优化方法- 缩短首屏加载时间相关内容,已被322网友关注,涉猎到的知识点内容可以在下方电子书获得。

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-router启用history模式下的开发及非根目录部署方法

    发布:2022-06-23

    给网友们整理关于vue的教程,这篇文章主要介绍了vue-router启用history模式下的开发及非根目录部署方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • Vue中跨域及打包部署到nginx跨域设置方法

    Vue中跨域及打包部署到nginx跨域设置方法

    发布:2023-01-18

    给大家整理一篇关于Vue的教程,这篇文章主要介绍了Vue中跨域以及打包部署到nginx跨域设置方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下


  • 详解Vue生命周期的示例

    详解Vue生命周期的示例

    发布:2023-01-04

    给网友朋友们带来一篇关于Vue的教程,本篇文章主要介绍了详解Vue生命周期的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 详解vue下载excel后台用post方法

    发布:2020-01-28

    这篇文章主要介绍了vue下载excel的实现代码,后台用post方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下


  • 如何使用eclipse搭建maven多module项目(构建父子项目)

    发布:2022-04-15

    这篇文章主要介绍了如何使用eclipse搭建maven多module项目(构建父子项目) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • vue使用vue-i18n实现国际化代码详解

    发布:2020-01-31

    本篇文章主要介绍了vue使用vue-i18n实现国际化的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • Vue.js样式动态绑定的具体实例方法

    发布:2020-01-20

    这篇文章主要介绍了Vue.js样式动态绑定实现小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 在Vue项目中使用WebUploader实现文件上传

    发布:2020-03-09

    WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 。这篇文章主要介绍了在Vue项目中使用WebUploader实现文件上传,需要的朋友可以参考下


网友讨论