zoukankan      html  css  js  c++  java
  • vue项目优化,加快服务器端渲染速度

    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>
  • 相关阅读:
    PC端Vue后台管理系统request.js结合业务封装axios
    从零开始学 Web 之 Vue.js(五)Vue的动画
    css实现左右两个div等高
    css样式优先级计算规则
    jquery中attr和prop区别
    table文字溢出显示省略号问题
    2020-12-15
    2020-12-14
    2020-12-11
    2020-12-10
  • 原文地址:https://www.cnblogs.com/zlbrother/p/9152517.html
Copyright © 2011-2022 走看看