彻底解决Webpack打包慢的问题:npm run build:dll

转载自：https://segmentfault.com/a/1190000006087638?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly

问题分析

我们先来看一下完全没有任何优化的时候，Webpack 的打包速度（使用了jsx和babel的loader）。下面是我们的测试文件：

//test.js
var react = require('react');
var ReactAddonsCssTransitionGroup = require('react-addons-css-transition-group'); var reactDOM = require('react-dom'); var reactRouter = require('react-router'); var superagent = require("superagent"); var eventproxy = require("eventproxy");

运行

webpack test.js

在我的2015款RMBP13，i5处理器，全SSD下，性能是这样的：

没错你没有看错，这几个第三方轮子加起来有整整668个模块，全部打包需要20多秒。

这意味着什么呢？你每次对业务代码的修改，gulp 或者 Webpack 监测到后都会重新打包，你要足足等20秒才能看到自己的修改结果。

但是需要重新打包的只有你的业务代码，这些第三方库是完全不用重新打包的，它们的存在只会拖累打包性能。所以我们要找一些方法来优化这个过程。

配置externals

Webpack 可以配置 externals 来将依赖的库指向全局变量，从而不再打包这个库，比如对于这样一个文件：

import React from 'react';
console.log(React);

如果你在 Webpack.config.js 中配置了externals：