2019-07-22

Vue项目优化

1、封装通用组件，组件化开发

2、样式尽量写在公共css里，利于webpack压缩

3、build/webpack.base.conf

设置externals屏蔽打包过大的依赖组件，利用cdn进行加载

externals: {

    'vue': 'Vue',

    'vue-router': 'VueRouter',

    'echarts': 'echarts',

    'element': 'ElementUI',

  },

4、build/webpack.prod.conf

注释UglifyJsPlugin压缩插件

安装webpack-parallel-uglify-plugin压缩插件，起到缓存作用，提高打包速度

注释UglifyJsPlugin方法，替换以下方法

new ParallelUglifyPlugin({

      cacheDir: '.cache/',

      uglifyJS:{

        output: {

          comments: false

        },

          warnings: false

      }

    })

5、config/index

设置productionSourceMap为false，关闭打包生成调试包，减小打包体积

6、封装常用的公共方法以及请求的通用模板（全局函数）

全局函数部分截图

全局函数部分截图

7、路由异步加载

8、使用Object.freeze冻结单纯展示的数据，减少数据劫持产生的性能消耗

9、使用组件懒加载

10、打包后的js文件放入cdn进行加载

11、项目所用的图片存入服务器，通过服务器图片地址进行展示

12、使用mixins方法复用（类似于全局函数，mixins使用全局引用，会造成每个页面加载复用的方法，尽量避免），封装复用的方法，例如分页等。

13、使用this.$options.data().xxx 初始化数据，简洁代码

14、对象声明： const obj = JSON.parse({xxx:xxx})，据说对比 const obj =  {xxx:xxx} ，运行效率会好些