1. CSS在开发模式中用import，在打包后用CDN

　min.js中做如下操作

if (process.env.NODE_ENV == 'development') {
　　require('../xxx.css');
}
 
　index.html中引入相应UI的CDN
 
2. 减少vendor.js的体积
　

#2.1 提取js到外部，减小vendor.js体积

1. 在/build/webpack.base.conf.js中，增加externals：

module.exports = {

    externals: {

        'vue': 'Vue',

        'axios': 'axios',

        'iview': 'iview'

    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

注意，externals的键值对中，键应为在/src/main.js中import的名称，值为引用的外部文件export的名称。以cdn.bootcss.com的库文件为例，vue的导出名为Vue，mint-ui为MINT，vue-router为VueRouter。

2. 复制/index.html为/index.dev.html，并修改/build/webpack.dev.conf如下：

plugins: [

    new HtmlWebpackPlugin({

      filename: 'index.html',

      // template: 'index.html',

      template: 'index.dev.html',

      inject: true

    })

]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

* 这是为了解决dev环境下，重复引用库的问题。

3. 在/index.html中，引入cdn文件

<body>

    <div id="app"></div>

    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>

    <script src="https://cdn.bootcss.com/iview/2.6.0/iview.min.js"></script>

</body>

vue项目优化，加快服务器端渲染速度的更多相关文章

  1. 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

    今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...

  2. Vue项目优化首屏加载速度

    Vue项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢 一.路由的懒加载 路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. 结合 ...

  3. vue项目优化与上线

    一.项目优化策略 1.生成打包报告 2.第三方库启用CDN 3.Element-ui组件按需加载 4.首页内容定制 5.路由懒加载 1.生成打包报告 1.1通过vue-cli的UI面板直接查看 1.2 ...

  4. Vue项目中v-for无法渲染数据

    在Vue项目中,我们想要实现下面的布局效果 后端返回的数据格式如下,可以看出产品列表五张图的数据位于同一个数组中 而我的html结构如下: 我希望直接渲染左边一张大图,然后右边的四张小图通过v-for ...

  5. vue项目优化--使用CDN和Gzip

    使用vue-cli构建的vue项目,在打包发布的时候,发现打包后的文件体积很大,使用webpack-bundle-analyzer分析后,发现占用空间最多的是引用的第三方依赖.第三方的依赖文件可以使用 ...

  6. vue项目使用 prerender-spa-plugin 预渲染

    由于项目要做seo优化,而用vue写成的spa页面谷歌浏览器等是抓取不到数据的.介于ssr和预渲染来说,后者相对来说要简单许多.所以采用了预渲染方式.采用插件prerender-spa-plugin使 ...

  7. ECshop网店系统百万级商品量性能优化-加快首页访问速度

    如果ECshop的商品数达到几万,十几万的时候,如果首页没有缓存,第一次访问的时候,你会发现其慢无比,原因就是清空了Cache后或者没有Cache的情况下,ECshop会Bulid一些Cache数据, ...

  8. vue项目优化之按需加载组件-使用webpack require.ensure

    require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...

  9. Vue 项目优化，持续更新...

    一.减少打包的体积 通过vue-cli 初始化项目后,使用 npm run build 生成的JS文件往往会很大,加载时间过长导致页面长时间白屏,所以我们尽可能的使用一下方法来减少打包体积. 1.1 ...

随机推荐

  1. Linux内核结构体--kfifo 环状缓冲区

    转载链接:http://blog.csdn.net/yusiguyuan/article/details/41985907 1.前言 最近项目中用到一个环形缓冲区(ring buffer),代码是由L ...

  2. 优化iOS程序性能的25个方法

    1. 用ARC管理内存 ARC(Automatic ReferenceCounting, 自己主动引用计数)和iOS5一起公布.它避免了最常见的也就是常常是因为我们忘记释放内存所造成的内存泄露.它自己 ...

  3. 前端框架（二）DIV多选复选框框的封装和MySql数据库存取

    图能够包括的寓意和含义是文字不能比拟的,先有一个效果图你也就知道这篇文章的主要内容是关于什么问题的.省去了一大堆文字的累述.看以下这张图: watermark/2/text/aHR0cDovL2Jsb ...

  4. 【Android开发经验】Cannot generate texture from bitmap异常的解决方式

    异常现象: 今天在处理用户头像的过程中,由于头像的处理比較复杂,由于,没有使用afinal自带的自己主动载入.而是自己依据头像的下载路径.手动进行下载和使用.可是在手动回收bitmap对象的过程中,会 ...

  5. Eclipse 如何导入MyEclipse的项目

      Eclipse 如何导入MyEclipse的项目 CreateTime--2018年3月8日09:53:55 Author:Marydon 1.Eclipse导入MyEclipse的项目方法,跟导 ...

  6. iOS最为简单时间轴（GZTimeLine）

    概述 迄今为止最为简单的时间轴 :可以自定义(类似于美团的送餐信息) 详细 代码下载:http://www.demodashi.com/demo/10797.html 迄今为止 最为简单的时间轴 :可 ...

  7. js的7个技巧

    http://www.vaikan.com/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/

  8. highstock使用案例（异步请求，懒加载）

    jsp中导入:<script src="<c:url value="/resources/js/highstock.js"></c:url> ...

  9. TP3.2中filed和find()使用

    1.总结:filed和find(),进行一维数组查询指定字段时,可以进行配合使用,获得结果:key:value; 但官方没有明确指出. 2.filed和getFiled最终的结果是不一样的,一个获得的 ...

  10. 内省对象 用的少，被BeanUtils代替

    类 描述 BeanInfo 对JavaBean进行描述的接口 Introspector 描述所有的JavaBean的成员类 PropertyDescriptor 描述的是JavaBean的属性类 sh ...