构建优化

一、Tree shaking

参考Tree shaking

另外一些需要注意的点:

  1. package.json 中要配置 sideEffects,避免一些不必要的文件(css)也受到 Tree shaking 的影响
  2. 注意 Babel 默认配置的影响,不要破坏掉了 ES6 模块化的语法。

二、JS 压缩

主要依赖于 terser-webpack-plugin,用来减少 js 文件体积。生产环境下是默认启用的。

三、Webpack 3 引入的作用域提升

基于 ES6 的代码静态分析,Webpack 3 可以得出模块之间的依赖关系,尽可能的将模块放在一个函数中,这一特性被称之为“Scope Hoisting”,翻译为作用域提升。

通过这种方式,代码体积将会更小、执行速度更快。

但前提是基于 ES6 模块化的语法。

四、Babel 优化

  1. 在需要的地方引入 polyfill
  2. 辅助函数的按需引入
  3. 根据目标浏览器按需转换代码

五、Webpack 依赖优化

通过优化依赖的打包,可以提高打包速度,节省开发时间。

  1. noParse
    提高构建速度、直接通知 webpack 忽略较大的库,注意:被忽略的库不能是模块化的(import、require、define)的引入方式。
  2. DllPlugin
    避免打包时对不变的库重复构建,从而提高构建速度。

六、基于 Webpack 的分割打包(split chunks)和代码拆分(split coding)

分割打包到底做些什么呢?
把单个 bundle 文件拆分成若干小的 bundles/chunks,减小首屏加载所需要的资源,从而提高首屏加载的速度,获取更好的用户体验。可以分割打包的通常是第三方资源包、公用资源,分割打包后还可以获取更好的缓存效果。

代码拆分其实就是动态import,import会返回一个Promise对象,如此就可以实现在代码中切分一些点,在需要的时候加载所需的代码。这些点通常是一些事件节点,比如说加载事件结束后可以获取日志代码,用户交互事件获取剩余的组件代码等等。

七、基于 Webpack 资源持久化缓存

  1. 每个打包的文件有一个唯一的 hash 值(基于 content hash)
  2. 修改后只有受影响的文件 hash 变化
  3. 充分利用浏览器缓存

八、Webpack 监测与分析

  1. Stats 分析与可视化图
  2. webpack-bundle-analyzer 进行体积分析
  3. speed-measure-webpack-plugin 速度分析
用户头像
登录后发表评论