产品设计协同平台项目性能优化

构建优化篇

优化前：(已经有提前优化过一些了，比如图片压缩，代码合并，插件按需加载)

可见最大的 vendor 包居然有 3.68MB（经过 gzip 压缩后），没有做额外配置的话，webpack 将所有的第三方依赖都打入了这个包，如果引入依赖越来越多，那么这个包就会越来越大。另外，系统本身的逻辑打的包也达到了 698kb。可以利用webpack-bundle-analyzer得到上面这个图和下面这个可视化图。

npm i -D webpack-bundle-analyzer

"analyzer": "use_analyzer=true npm run serve" # package.json加入这个命令

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

chainWebpack: config => {
    if (process.env.use_analyzer) {     // 分析
      config
          .plugin('webpack-bundle-analyzer')
          .use(BundleAnalyzerPlugin)
    }
  },

TIP

CDN 的工作原理是将源站的资源缓存到位于全球各地的 CDN 节点上，用户请求资源时，就近返回节点上缓存的资源，而不需要每个用户的请求都回您的源站获取，避免网络拥塞、缓解源站压力，保证用户访问资源的速度和体验。因为打包后的产物本身也是上传到 CDN 的。但是我们要做的是将体积较大的第三方依赖单独拆出来放到 CDN 上，这样这个依赖既不会占用打包资源，也不会影响最终包体积。如果我们想引用一个库，但是又不想让 webpack 打包，并且又不影响我们在程序中以 import、require 或者 window/global 全局等方式进行使用，那就可以通过配置 externals。