打包优化

效果：

• 打包速度更快
• 输出资源更小

经验：

• 不要过早优化，要等项目发展到一定规模后，性能问题随之而来再去对症下药

代码转译

1. 从配置中获取打包入口
2. 匹配 loader 规则，并从入口模块进行转译
3. 对转译后的模块进行依赖查找
4. 对新找到的模块重复二三步骤

   开发环境调优

   
   

   其他打包工具

   rollup parcel 各自特点和优势

   rollup

   webpack 全面、一切皆模块、丰富的loader 和 plugin 可以满足仍和场景
   rollup 像是手术刀，专注于 js 的打包

   parcel

• 打包速度更快
  • 利用 worker 来并行 执行任务
  • 文件系统缓存
  • 资源编译处理流程

• 宣称零配置

  • 本质是 对配置进行了切分，交给一些特定的工具进行分别管理

    js 打包工具发展趋势

• 性能、通用性

• 配置极小化与工程标准化
  • 很多东西都可以设为工程默认，比如 src dist 文件夹的命名
• webAssembly —— wasm
  • 性能媲美原生
  • C等语言都可以编译为 wasm 在现代浏览器运行

    如何选择合适的打包工具

    当你只打包js的时候，可以用 rollup

    react 将原来的打包工具从 browserify 迁移到 rollup 获得的收益

    • 最低限度的附加代码
    • 对 es6 module 的良好支持
    • 通过 tree shaking去除开发环境代码
    • 通过自定义插件实现 react 一些特殊的打包逻辑

短时间搭建一个原型或者不需要深度定制的工程 —— parcel