2019.05.08

5.9 - 5.12 早报更新时间不定，有可能出现停更，提前跟大家请个假，不要祸害我的 Issue 啦

[文章] 《Tree-Shaking 性能优化实践 - 原理篇》Vue 3.0 包的缩减就是用 Tree-Shaking 昨天的视频有介绍：https://juejin.im/post/5a4dc842518825698e7279a9 (opens new window)

[文章] 《多页应用 Webpack4 配置优化与踩坑记录》：https://segmentfault.com/a/1190000016685119 (opens new window)

[类库] Vue 剪贴板类库，通过一条指令，就能方便的实现该功能：https://github.com/euvl/v-clipboard (opens new window)

[教程] 高级 React Hooks 的使用技巧：https://github.com/kentcdodds/advanced-react-hooks (opens new window)

1. useReducer: simple Counter
2. useReducer: HTTP requests
3. useContext: simple Counter (covers useMemo and useCallback as well)
4. useContext: Caching response data in context (covers useMemo and useCallback as well)
5. useLayoutEffect: auto-growing textarea
6. useImperativeHandle: scroll to top/bottom
7. useDebugValue: useMedia

配图 - Tree-Shaking 性能优化实践

示例 - 多页应用 Webpack4 配置优化与踩坑记录 - splitChunks

const commonOptions = {
  chunks: 'all',
  reuseExistingChunk: true
}

export default {
  namedChunks: true,
  moduleIds: 'hashed',
  runtimeChunk: {
    name: 'manifest'
  },
  splitChunks: {
    maxInitialRequests: 5,
    cacheGroups: {
      polyfill: {
        test: /[\\/]node_modules[\\/](core-js|raf|@babel|babel)[\\/]/,
        name: 'polyfill',
        priority: 2,
        ...commonOptions
      },
      dll: {
        test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
        name: 'dll',
        priority: 1,
        ...commonOptions
      },
      commons: {
        name: 'commons',
        minChunks: Math.ceil(pages.length / 3), // 至少被1/3页面的引入才打入common包
        ...commonOptions
      }
    }
  }
}

示例 - Vue 剪贴板类库，通过指令的方式操作

<button v-clipboard="value">
  Copy to clipboard
</button>

今日图 - 你和 Bug 的距离