图片来自网络

CommonsChunk

• (不开启动态加载情况) 单独打包 node_modules 生成 modules.[chunkhash:8].js，业务代码修改对其没有影响，提高缓存利用率

• (开启动态加载情况) Dynamic Imports Code Splitting后，提取chunks公共代码生成 commons.[chunkhash:8].async.js 减小打包总体积

• 修改配置(不开启动态加载情况)

  commons: [{
    name: 'modules',
    minChunks: function (module) {
      return module.context && module.context.includes('node_modules');
    },
  }],

• TODO

  • 提取node_modules下的包采用路径匹配方式，开启Dynamic Imports后修改业务代码会导致modules包hash值变化
  • BizCharts、DataSet包体积较大，在index.html中加载对独立的H5页面会有影响，按需加载首次进入图表页面又会比较慢
  • 根据src/router.js进行Dynamic Imports，保持同一站点页面访问的流畅度，不然每进入一个页面都会有loading

• 参考资料

  • CommonsChunkPlugin，webpack4后改用SplitChunksPlugin
  • af-webpack配置

TreeShaking

• roadhog改造：

  • 执行流程：
    roadhog dev -> getUserConfig -> use babel-preset-umi -> getWebpackConfig -> getConifg -> startDevServer
  • babel配置项：ry-roadhog

• 修改配置

  babel: {
    env: { modules: false },
  }

• TODO:

  • 设置 modules: false 后测试浏览器兼容性

• 参考资料：

  • 深入剖析 webpack 打包生成的一大堆代码到底是啥
  • webpack 如何优雅的使用tree-shaking（摇树优化）
  • Webpack3 Tree Shaking
  • babel-preset-env
  • babel-preset-umi
  • Webpack 3, Babel and Tree shaking not working

浏览器缓存

• Nginx ETag算法，根据文件最后修改的时间和内容长度生成，在通过scp命令上传的时候会改变时间导致Etag失效

• 通过比较新旧打包文件名（文件名带了hash值或版本号）来判断根目录的js、css是否需要上传，参考脚本