码迷,mamicode.com
首页 > 其他好文 > 详细

VUE 前端项目优化方法

时间:2019-01-22 15:05:48      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:lin   三方   res   格式   package   keyword   协同办公   uil   link   

前端项目通过webpack打包会生成app.js和vendor.js,如果第三方组件依赖过多,会造成打包后的vendor.js过大,页面首次加载的时候会出现白屏时间过长,影响用户体验。对此,我们需要通过下面的方法对前端项目进行优化,减小打包后生成的js大小,从而提高加载速度。下面以USM项目为例,进行优化:

一、公用静态资源通过CDN加载

目前所有项目都通过npm包的形式引入vue、vue-router、axios、vuex、element-ui、ucar-view这些第三方包,webpack打包的时候会将这些资源打包到vendor.js中,我们可以将这些公用资源通过cdn引入到index.html中,可大大减小vendor.js的大小。


第一步:index.html中cdn引入静态资源

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta name="renderer" content="webkit" />
    <link rel="shortcut icon" href="static/logo.ico" />
    <title>统一管理系统-神州优车集团协同办公门户</title>
    <!-- heade中引入公用css资源 -->
    <link rel="stylesheet" href="http://w3static.zuchecdn.com/upload/201901/1547542189993_element-ui.css" />
    <link rel="stylesheet" href="http://w3static.zuchecdn.com/upload/201901/1547548288099_ucar-view.css" />
  </head>
  <body>
    <div id="app"></div>
    <!-- body中引入公用js资源 -->
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542004668_vue.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542053516_axios.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542073388_vue-router.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542116839_element-ui.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547695026296_ucar-view.umd.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542098031_vuex.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542135730_es6-promise.auto.min.js"></script>
  </body>
</html>

第二步:webpack.base.conf.js中引入静态资源

//放入module.exports中
externals: {
    vue: ‘Vue‘,
    ‘vue-router‘: ‘VueRouter‘,
    axios: ‘axios‘,
    vuex: ‘Vuex‘,
    ‘element-ui‘: ‘ELEMENT‘,
    ‘@ucar/ucar-view‘: ‘ucar-view‘
  },

第三步:main.js中删除element-ui、ucar-view的引用

  删除import elementui from ‘element-ui‘

  删除import ucarView from ‘@ucar/ucar-view‘

  删除Vue.use(elementui)

  删除Vue.use(ucarView) 或者 Vue.use(Element, { size: ‘small‘})

  删除import ‘element-ui/lib/theme-chalk/index.css‘

 

  增加Vue.prototype.$ELEMENT = { size: ‘small‘}

第四步:删除项目依赖包

在项目package.json中删除已经用cdn引入的包

删除前:

技术分享图片

删除后:

技术分享图片

这四步完成后,需从新启动项目才能正常运行,npm run build打包后能明显发现vendoe.js缩小很多

技术分享图片

二、开启gzip压缩

config/index.js文件的productionGzip设置为true

技术分享图片

然后安装compression-webpack-plugin依赖

npm install --save-dev compression-webpack-plugin@1.1.11

注意:不能安装最新的2.0版本,需webpack4.x版本支持,安装时固定版本号即可

npm run build 打包后,app.js和vendor.js会生成gzip压缩文件,app.js也从237k压缩到42k

技术分享图片

想让浏览器加载页面时加载gzip格式的压缩文件,还需要在nginx服务器配置开启gzip

VUE 前端项目优化方法

标签:lin   三方   res   格式   package   keyword   协同办公   uil   link   

原文地址:https://www.cnblogs.com/liuqing576598117/p/10303708.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!