vue打包优化

介绍一款神器，webpack-bundle-analyzer（帮助我们查看各个模块的大小），只需要在webpack.prod.conf.js中加上下面一段，然后npm run build --report就可以了

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
 }

第一步优化：图片懒加载   安装插件vue-lazyload  详情参考官网：https://github.com/hilongjw/vue-lazyload

在main.js中设置以下代码

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

Vue.use(VueLazyload, {
  preLoad: 1.0,  //图片 设置显示比列 默认为1.3
  error: require('../static/img/timg.gif'),
  loading: require('../static/img/timg.gif'),
  attempt: 1
})

第二步优化：路由懒加载

 { 
      path: '/EnterpriseServe', 
      component: resolve => require(['@/pages/serve/EnterpriseServe.vue'],resolve),
      meta: {
        title: "企业服务",
        active: "/EnterpriseServe"
      }
    },
    { 
      path: '/PersonageServe', 
      component: resolve => require(['@/pages/serve/PersonageServe.vue'],resolve),
      meta: {
        title: "个人服务",
        active: "/PersonageServe"
      }
    },

第三步优化：在webpack.prod.conf.js配置uglifyjs-webpack-plugin（vue-cli已经帮我们装好了）

new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          unused: true, //是否去掉未关联的函数和变量
          warnings: false, //是否去除警告
          pure_funcs: ['console.log'], //去掉所有console语句
          reduce_vars: true //弄忘记了^_^
        }
      },
      sourceMap: true, //将错误消息位置映射到模块(会减慢编译速度)
      parallel: true //多通道并行处理
    }),

第四步优化：cdn外部加载第三方包

//在index.html中配置
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

//在webpack.base.conf.js里配置

externals: {
    'vue' : 'Vue',
    'vue-router': 'VueRouter',
    'jquery': '$',
    'echarts': 'echarts'
 },


//这样写可以去掉import引入

第五步优化：懒加载子组件

shareTop: () => import('../components/share-top.vue').then(component => {
        component.default._Ctor = {}

        if (!component.default.attached) {
          component.default.backupMounted = component.default.mounted
        }
        component.default.mounted = function() {
          if (component.default.backupMounted) {
            component.default.backupMounted.call(this)
          }
        }
        component.default.attached = true
        return component
      }),

以上是个人的一些方法，希望能对大家有一点用处，也希望能和大家一起多多学习，共同进步