打包体积分析和优化-526互联

如果项目中打包的体积过大的话，首先可能会享到路由懒加载，分包，但是终究效果不是很明显。

我们用 webpack-bundle-analyzer 打开一个包分析管理。npm run build会自动打开分析管理

也可以package.json中自定义配置命令 "analyz": "NODE_ENV=production npm_config_report=true npm run build"

面积越大包越大。所以我们思路是将比较大的包在打包的时候剔除在外（externals）流程如下

安装依赖 ： npm install --save-dev webpack-bundle-analyzer

vue.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin(
        {
          analyzerMode: 'server',
          analyzerHost: '127.0.0.1',
          analyzerPort: 8889,
          reportFilename: 'report.html',
          defaultSizes: 'parsed',
          openAnalyzer: true,
          generateStatsFile: false,
          statsFilename: 'stats.json',
          statsOptions: null,
          logLevel: 'info'
        }
      ),
    ],
    externals: ['Vue','Vuex','three']  //在打包的时候排除掉这些包，并采用外部CND的方式引入这些文件
}

public/index.html 根据环境引入对于的CDN的资源

<% if(NODE_ENV === "production") { %>
    
      <script src="https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js"></script>
      <script src="https://cdn.xxxx.vue.js"></script>
      .....
<% } %>

这是执行 npm run build 后查看包体积。之前不需要的不在了

但是项目中，我们也会用到core.js,这是对低版本浏览器做降级兼容用的，

优化的方案：使用低版本的用户占少数，对于高版本的浏览器打包的babel和core.js便也多余了，所以能不能这样做，打包的时候生成两套结果，一套兼容低版本浏览器包会大一些，一套提高给高版本浏览器

如何配置? 在vue-cli配置选项中添加 --modern 配置

"build": "vue-cli-service build --modern"

如果想校验是否区分高低版本的话，可以通过以下来查看

if（process.env。VUE_CLI_MODERN_MODE）{
    analyzerPort: 2727,
}
同时对比两个端口下的不同打包内容和体积

那问题来了，webpack是如何做到对于高版本使用小包，低版本使用大包的呢？

在dist/index.html中可以体现出来 type="module" 是es6的语法，高版本的浏览器才会使用，低版本会直接执行到下面的 nomodule ，对于官方而且高版本的浏览器在支持es6语法的情况下会自动忽略加载nomodule的文件

<script defer="defer" type="module" src="/static/js/chunk-vendors.47d8431c.js"></script>
<script defer="defer" type="module" src="/static/js/app.854b6731.js"></script>     
                                                                                  ---高版本浏览器加载 体积小
                                                                                  
<script defer="defer" src="/static/js/chunk-vendors-legacy.47d8431c.js" nomodule></script>
<script defer="defer" src="/static/js/app-legacy.c2a8c48e.js" nomodule></script>
                                                                                  --低版本浏览器加载，体积大