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. json(JavaScript Object Natation)学习

    Json必需的包: commons-httpclient-3.1.jar commons-lang-2.4.jar commons-logging-1.1.1.jar json-lib-2.2.3-j ...

  2. 〖Linux〗Ubuntu13.10中使用虚拟机对MTK手机进行线刷

    最近一个同学把一台MTK手机刷坏了,在我的笔记本电脑上没有WindowsXp操作系统: 而在MTK线刷过程中,最好的刷机系统便是WindowsXP3,于是有了想在Linux中直接开启XP虚拟机来刷机的 ...

  3. Design Pattern Bridge 桥设计模式

    桥设计模式事实上就是一个简单的has a relationship.就是一个类拥有还有一个类,并使用还有一个类实现须要的功能. 比方遥控器和电视之间能够使用桥设计模式达到能够使用同一个遥控器控制多台电 ...

  4. 机器学习的敲门砖：手把手教你TensorFlow初级入门

    摘要: 在开始使用机器学习算法之前,我们应该首先熟悉如何使用它们. 而本文就是通过对TensorFlow的一些基本特点的介绍,让你了解它是机器学习类库中的一个不错的选择. 本文由北邮@爱可可-爱生活  ...

  5. ContactsContract.Contacts之sort_key

    // 从Contacts表中找出所有联系人 Cursor cursor = context.getContentResolver().query(         ContactsContract.C ...

  6. Xshell和Xftp5配置连接阿里云服务器

    配置Xftp5 配置成功后 配置Xshell 记住用户名和密码 连接成功

  7. asp.net三层架构详解（转）

    摘自:http://www.cnblogs.com/cresuccess/archive/2008/12/10/1351675.html 一.数据库             ,)   )     no ...

  8. HDUOJ--畅通工程

    畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  9. 1.Java基础-面向对象编程思想（封装继承多态接口）

    封装: 1.定义:隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读和修改的访问级别. 2.封装的目的是:增强安全性和简化编程,使用者不必了解具体的实现细节,而只是要通过外部接口,一特定的 ...

  10. oc set/get方法

    新建一个“Cocoa Touch Class”文件,命名为People People.h 写入 @interface People : NSObject @property int age; @end ...