webpack实际使用

treeshaking

tree shaking 本质上用于移除js 上下文中未引用代码

• 使用 ES 2015模块语法（即 import 和 export）
• 在项目 package.json中，添加 sideEffects入口
• 引用一个能够删除未引用代码的压缩工具，如UglifyJSPlugin

生产环境构建

使用ExtractTextPlugin将 css 分离成单独的文件

代码分离

• 入口起点：使用 entry 配置手动分离代码
• 防止重复：使用 CommonsChunkPlugin去重（指定公共bundle名称）和分离chunk
• 动态导入：通过模块的内联函数调用来分离代码

缓存

建议将第三方库提取到单独的 chunk 文件中，它们很少像本地的源代码一样频繁修改，如此利用客户端的长效缓存机制，通过命中缓存来消除请求，减少向服务器获取资源。

shimming

polyfills 是一种模块引入方式，不推荐在主 bundle 中引入 polyfills，不利于具备这些功能的现代浏览器用户，使它们下载体积很大，但却不需要的脚本文件。