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. H5中JavaScript常用代码片段

    /** * 批量替换方法,批量过滤特殊字符,通常用在通过后的各种编辑器添加的内容在App上编辑上使用 * james.wang 2016-11-11 * 使用方法:ReCont(Content,[&q ...

  2. 〖Linux〗Ubuntu13.10，配置tftp服务器

    前言,配置了好久没有发现老是出问题tftp: server error: (2) Access violation,一般侦测之后... 1. 安装软件包:apt-getsudo apt-get ins ...

  3. html中文乱码问题的解决

    当我试着用html写代码的时候,发现直接保存的文件用浏览器打开时中文显示是乱码的,所以我找了一些解决方法,可是原因不太明白,所以我也就不解释了,能够自己找找原因,以下提供解决方法: 在写的html的第 ...

  4. 使用CXF实现基于Rest方式的WebService(转)

    转自:https://www.cnblogs.com/zjm701/p/6845813.html原文更清晰 本文介绍使用CXF实现基于Rest方式的WebService(CXF的版本是3.0.0) 一 ...

  5. 【C++】const成员函数

    形式: 在成员函数后面加上const限定词,表示不会修改对象内容. 例如Circle类: class Circle { double r; public: Circle(double newr) { ...

  6. 【LeetCode】35. Search Insert Position (2 solutions)

    Search Insert Position Given a sorted array and a target value, return the index if the target is fo ...

  7. 使用EditPlus技巧，提高工作效率(附英文版、自动完成文件、语法文件下载)

    http://www.cnblogs.com/JustinYoung/archive/2008/01/14/editplus-skills.html

  8. Quartz2之入门示例

    环境:XP+Myeclipse6.5+JDK1.6 quartz官网:http://www.quartz-scheduler.org/ 参考资料 1 Quartz任务调度快速入门 http://www ...

  9. MVC中JSON字符长度超出限制

    本文导读:在MVC中通过JsonResult返回JSON字符串时,如果字符串长度过长,会抛出使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错,字符串的长度超过了为 ...

  10. Retrofit2使用初探

    首先需要导入这样两个包 compile 'com.squareup.retrofit2:retrofit:2.0.0-beta4' compile 'com.squareup.retrofit2:co ...