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. java面试第三天

    类和对象: 类:主观抽象,是对象的模板,可以实例化对象----具有相同属性和行为的对象的集合. 习惯上类的定义格式: package xxx; import xxx; public class Xxx ...

  2. jQuery中first-child与first选择器区别

    1.first-child first-child为每个父级元素匹配第一个子元素,可以匹配出多个元素: 示例代码: <!DOCTYPE html> <html lang=" ...

  3. 关于python打包成exe的一点经验之谈

    我经常用python写些脚本什么的,有时候脚本写完以后,每次运行都得在IDE打开在运行,很麻烦,所以经常将python编译成exe.SO...有了一点经验,在这和大家分享一下.      python ...

  4. eclipse 导入tortoiseSVN检出项目，不显示svn信息（eclipse安装svn插件）

      eclipse 导入tortoiseSVN检出项目,不显示svn信息(eclipse安装svn插件) CreateTime--2018年5月10日14:10:35 Author:Marydon 1 ...

  5. vs2017预览版下载

    vs2017预览版,没有限制的不过不能生成生产版本,集成最新的功能! 下载地址: https://www.visualstudio.com/zh-hans/vs/preview/

  6. opencv在手机上实现照片背景虚化

    概述 使用androidstudio开发,在手机上实现照片背景虚化 详细 代码下载:http://www.demodashi.com/demo/10599.html 一.准备工作 1.需要下载安装an ...

  7. JavaScript-jQuery插件开发全解析

    摘自:http://www.iteye.com/topic/545971 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法 ...

  8. windows安装tensorflow GPU

    一.安装Anaconda Anaconda是Python发行包,包含了很多Python科学计算库.它是比直接安装Python更好的选择. 二.安装Tensorflow 如果安装了tensorflow, ...

  9. 10个你必须知道的jQueryMobile代码片段(转)

    1.在列表项和按钮上禁用文本截断      如果你的列表项或者按钮上是一个很长的文本,它将会被jQuery Mobile自动截断,要禁用这个截断设置,需要在CSS选择器上添加属性"white ...

  10. Report_SRW工具的基本用法（概念）

    2014-05-31 Created By BaoXinjian