vue打包文件过大（一）

项目上线了，业务功能ok，界面外观ok。就是有点缺陷就是第一次登录太慢了要8-9秒。这是客户给我的说的，虽然我解释了单页应用的优缺点，但还是需要分析下。

最大的文件就是app.8669b0c5.js和chunk-vendors.c823af3e.js
咋整呢，只能逐个来分析了

1. 安装分析插件webpack-bundle-analyzer ，这个就不说了
2. 配置vue.config.js文件

      config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);

3、打包浏览分析结果

优化手段：

• 自然就是将一些全局组件独立出来

config.externals = {
                "lodash": '_',
                // 'iview': 'iView',
                "view-design": 'iview',
                "iview": 'ViewUI',
                // 'goingui-ctl': 'goingui',
                'vue': 'Vue',
                'vue-router': 'VueRouter',
                'vuex': 'Vuex',
                'axios':'axios',
                'jquery': "jQuery",
                'vue-pdf': "vuePdf",
                "babel-polyfill": "window"
            };

修改public下的index.html文件

  <% if (process.env.NODE_ENV === 'production') { %>
  <script src="./static/plugin/lodash.min.js"></script>
      <script src="./static/plugin/vue.min.js"></script>
      <script src="./static/plugin/vue-router.min.js"></script>
      <script src="./static/plugin/vuex.min.js"></script>
      <script src="./static/plugin/axios.min.js"></script>
      <script src="./static/plugin/iview.min.js"></script>
  <% } %>

• 分析各个组件，将不需要的代码删除

第三方组件引用的同名函数不做处理，可以这么解决

vue.config.js文件中设置alias来解决，测试了有效

 config.resolve.alias.set('@api', resolve('src/api'))
            .set('_c', resolve('src/components'))
            .set('bn.js', resolve('node_modules/bn.js'))