Webpack打包工具性能优化 - externals字段

前言

为什么要写这篇文章

在最近的项目中顺便学习了一下React.而React推荐使用ES6所以也顺便学习了一下ES6.然后现有浏览器不能直接支持ES6的语法因此需要第三方打包工具.这里学习使用了Webpack.然而React本身大小就有1M+.每次Webpack进行打包操作的时候总是会显得过于臃肿.消费时间近10s.因此写下本篇文章来记录自己的打包优化之路

优化方案

对于React这类第三方库而言.我们是不需要多次进行打包的因为我们本身不会对其源码进行操作修改.因此多次打包同一个包是一件多余的事情.因此我们要告诉Webpack我们不需要打包这个包.而只需要用手动的方式来直接引入预编译好的js版本即可.

解决方案

  • 在网上下载预编译好的js文件
  • 在HTML代码中(在调用打包过后的js文件前)引入预编译好的js文件
  • webpack.config.js中添加externals字段.如以下写法:

    1
    2
    3
    4
    5
    6
    module.exports = {
    externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
    }
    }
  • 删除不必要的node库,减小项目体积(如React:npm uninstall --save react react-dom)

文章目录
  1. 1. 前言
    1. 1.1. 为什么要写这篇文章
  2. 2. 优化方案
  3. 3. 解决方案