CDN

你可以使用 CDN 外链的方式引入这些第三方库，这样能大大增加构建的速度(通过 CDN 引入的资源不会经 webpack 打包)。如果你的项目没有自己的CDN服务的话，使用一些第三方的CDN服务，如等是一个很好的选择，它提供过了免费的资源加速，同时提供了缓存优化，由于你的第三方资源是在html中通过script引入的，它的缓存更新策略都是你自己手动来控制的，省去了你需要优化缓存策略功夫。

TIP

很多文章说使用 CDN 引入的方式能大大减小代码的体积，这是不可能的。虽然打包完的 小了，但那部分代码只是被你拆出去，用CDN的方式引入罢了。你想减小体积，最高效的方案是启用GZIP。

暂时构建速度还没有遇到什么瓶颈，所有没有必要单独剥离部分第三方依赖。使用CDN引入的方式等于一些第三方依赖的版本你是通过package.json来控制的，一些依赖则需要手动维护，增加了一些维护成本。目前基于 webpack 的optimization.splitChunks已经做了资源的缓存优化，静态资源的缓存已经做得很好了。并且目前所有的静态资源都会上传到自己的CDN服务，没有必要使用第三方的CDN服务。

使用方式

先找到 vue.config.js， 添加 让 webpack 不打包 vue 和 element

然后配置那些第三方资源的CDN，请注意先后顺序。

之后通过 html-webpack-plugin注入到 index.html之中:

找到 public/index.html。通过你配置的CND Config 依次注入 css 和 js。

完整的代码修改

最终你可以使用 npm run preview -- --report 查看效果 如图：

TIP