前言

为什么会发出标题的疑问？因为我觉得面试官可能也会这么问,如果你是一个初级前端，可能面试官不会问你，但是中高级来说，我觉得你应该了解或者有过在项目中使用的经历。webpack那么多配置，为什么我没有挨个问每一个的配置是什么？就像一句话我只需略微出手，就已知这个分段的极限。

输出文章之前老样子还是先看一下其他作者相关的文章，看到上一篇高赞高收藏的文章已经是3年前。

正文

先说场景，首屏白屏时间太长了，能不能优化一下？好了你兴奋了，一定是先有场景，你才更有兴趣去研究解决这些场景需要用到的技术。webpack的externals就是来帮你解决这个问题的。好家伙，白屏跟externals怎么就关联上了，你这跨度有点大啊。别急，先想想为什么白屏时间过长，很大一部分原因是你平时开发的单页面应用里面去依赖了很多很重的依赖，如果说你打包后的文件大小有100mb，另一个情况下你打包后的项目只有10mb，那么那个加载速度会快一些你心里应该清楚了吧。你肯定又要问了，我项目比如就需要用到echarts来绘制好看又炫酷的大屏，难不成你不让我引不成？当然不是，既要、又要、好家伙你全都要是吧，对对对。比如项目中用到一些比较大的依赖，像echarts、elementui等等，我既要在项目里无感（就像正常打入包里一样）使用，还要减少最终的打包体积，那么就要通过cdn以及webpack的externals了。不过需要注意的是，如果你通过cdn手动来引入需要的依赖的时候，你要注意引入的顺序，避免造成依赖找不到的问题。

动手试一试

1.如果项目用vue的脚手架vue-cli来搭建项目，那么在vue.config.js里可能会有这么一个配置:

vue.config.js 复制代码

module.exports = {
  configureWebpack {
    externals: { 
        XXXXXX
    }
  }
}

首先你要知道，vue-cli是一个基于webpack的脚手架，那么来看下文档对于configureWebpack说明:

了解到类型既可以是个Object也可以是Function，我们这里的示例用的是Object的写法，所以在vue.config.js的配置会合并到最终的配置。

2.打通了第一步，继续呗，去webpack官网看看externals:

The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's (any end-user application) environment. This feature is typically most useful to library developers, however there are a variety of applications for it.

获取关键信息，externals配置为我们提供了一种将依赖排除在打包bundles之外的一种方式。

3.先正常在入口文件引入个jquery的依赖为例子：

入口文件

webpack配置

打包结果:

页面引入:

控制台打印成功:

4.上面是没有配置externals的情况，好了，现在我们配置一下，将3里面的webpack配置和页面引入进行调整:

webpack配置:

打包看下打包结果(是不是小了很多):

页面引入(注意我引入jquery cdn的顺序,留给你思考如果我把jquery顺序放在main后面可不可以):

控制台打印成功:

到这里，你应该get到了使用externals的作用，对于我们源码的开发并不影响，我们依然是按照原来的方式进行开发，只不过是最终的打包结果和依赖的引入发生了变化，所以下次如果你想优化一下你的项目的打包体积是否有了一个明确的方向呢？如果对你有帮助的话可以回来给我一个免费的一键三连！

尾声

能看到这里你肯定也是我的铁杆粉丝了，其实，我不是一个话痨的人，我平时讲话也很少，我之所以在描述一个事情的时候尽量做足铺垫，这样对不太清楚的人来说可以做到更容易听懂。做一个友善的人 hh ^_^。

很多人工作，接手项目埋头就写，对于公司而言，这是好事，公司关注的是什么？是你的产出能给公司带来多少效益，对你来说呢？很多人工作了很多年可能都不会去关注这些，工作了很多年，和工作了1天可能区别不大，为什么？因为你一直在做重复性的工作。我的意思是让你去开拓创新吗？并不是，虽然站在公司的角度上来讲，会细分每个人的工作，分前端、后端等等，这样的好处是公司可以更方便的招人，给个人带来的坏处也是显而易见的，很可能你就变成了一个螺丝钉。我的建议是如果你现在工作给你机会，你就争取多去掌握一点，比如你是前端就在精进前端的基础上，尝试加入后端的工作，如果你是后端也尝试加入前端的工作，这个建议一定是建立在你愿意的基础上，如果你的态度是抵触的，那一定不要尝试应付，因为这会给你的同事带来难以维护的弊端，只有你愿意，你才会找方法请教人去把这件事完善好，一定要清楚做成和做好的区别。

你知道webpack的externals吗？

前言

正文

动手试一试

尾声