# CDN

你可以通过执行npm run preview -- --report来分析webpack打包之后的结果,观察各个静态资源的大小。你可以发现占用空间最多的是第三方依赖。如vueelement-uiECharts等。

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

TIP

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

# 我个人暂时不使用CDN引入第三方依赖的原因:

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

当然所有的优化都是需要结合自己的具体业务来调整的! 之后可能会采用这种引入方式,或者使用webpack dll的方式进行优化。如果你觉得CDN引入对于你的项目有益处,你可以遵循如下方法进行修改:

# 使用方式

先找到 vue.config.js, 添加 externalswebpack 不打包 vueelement

externals: {
  vue: 'Vue',
  'element-ui':'ELEMENT'
}

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

const cdn = {
  css: [
    // element-ui css
    'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
  ],
  js: [
    // vue must at first!
    'https://unpkg.com/vue/dist/vue.js',
    // element-ui js
    'https://unpkg.com/element-ui/lib/index.js'
  ]
}

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

config.plugin('html').tap(args => {
  args[0].cdn = cdn
  return args
})

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

<head>
  <!-- 引入样式 -->
  <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%=css%>">
  <% } %>
</head>

<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>
<% } %>

之后还有一个小细节是如果你用了全局对象方式引入 vue,就不需要 手动 Vue.use(Vuex) ,它会自动挂载,具体见 issue

完整的代码修改

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

TIP

同理,其它第三方依赖都可以使用相同的方式处理(比如vuexvue-router等)。当然你也可以选择使用 DLLPlugin的方式来处理第三方依赖,从而来优化构建。