vue打包文件过大（一）

àì夳堔傛蜴生んèń 2022-11-03 00:58 205阅读 0赞

项目上线了，业务功能ok，界面外观ok。就是有点缺陷就是第一次登录太慢了要8-9秒。这是客户给我的说的，虽然我解释了单页应用的优缺点，但还是需要分析下。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]  
最大的文件就是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);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 1]  
3、打包浏览分析结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 2]

优化手段：

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

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"
                };

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 3]  
修改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>
      <% } %>

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 4]  
第三方组件引用的同名函数不做处理，可以这么解决

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'))

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: /images/20221024/24c659943be44d7f85944625376521b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 1]: /images/20221024/d9971d44f6d743eda5cc8af79d6581d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 2]: /images/20221024/f3c1b77bcca14518b558754a7d34eead.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 3]: /images/20221024/cc5b04cd7dad44fdb77ae1a06a1adafd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 4]: /images/20221024/2fddf38164a341cd87f827ee2318f70f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 5]: /images/20221024/b7044b0eefcc48c2b2ebc8644ed6a627.png