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. 修改MySQL数据文件的位置

    1:查看MySQL服务名称 2:管理员启动控制台 3:修改配置文件my.ini中数据文件的位置,[注]修改完成之后要把响应的数据文件从旧目录拷贝到新目录当中. 4:重新启动服务 5:登录数据库查看数据 ...

  2. 获取每月第一天最后一天 java

    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd"); //获取前月的第一天 Calendar cal_1=Ca ...

  3. MSSQL语句批量替换表中某列字段内容的某个字符

    UPdate 表 Set 字段名=REPLACE(字段名,'查找目标字符','要替换的字符') 比如:在Products表中把字段CharCode中含有ch-的字符全部替换为dw- UPDATE Pr ...

  4. /etc/fstab 参数详解（转）

    转自:http://blog.csdn.net/duyiwuer2009/article/details/8644753/ /dev/hda5       /home/new              ...

  5. redis阻塞bgsave与bsrewriteaof

    问题描述: redis在进程偶尔会出现2个进程redis-server \ redis-bgsave Redis 首先 fork 一个子进程, 并在该子进程里进行归并和写持久化存储设备(如硬盘)的. ...

  6. Java实现可视化迷宫

    代码地址如下:http://www.demodashi.com/demo/14547.html 需求 使用深度优先算法求解迷宫路径,使用Java实现求解过程的可视化,可单步运行,形象直观. 演示效果 ...

  7. 不止是动态化：Weex项目和阿里无线技术开源方向

    这是开发者正在书写的峥嵘岁月.受益开源,回馈社区.阿里巴巴集团已经开源115个项目,并正式加入FSF基金会,Apache基金会,linux 基金会和Xen的顾问团队,并在云栖大会北京峰会宣布AliSQ ...

  8. archlinux使用sudo

    Sudo是允许系统管理员让普通用户执行一些或者全部的root命令的一个工具,如halt,reboot,su等等.这样不仅减少了root用户的登陆 和管理时间,同样也提高了安全性. Sudo不是对she ...

  9. HDUOJ1060Leftmost Digit

    Leftmost Digit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  10. IOS 内存优化和调试技巧

    基础部分 1: 图片内存大小小结 a: 图片:是占用内存的大户,尤其是手机游戏图片资源众多.对图片资源在内存中占用量的计算成为J2ME游戏开发者的经常性工作,CoCoMo来解释一下如何计算图片在内存中 ...