Webpack 引入 CDN 链接优化编译后体积详解

在 Vue 项目中，所有引入到工程中的 js 文件，在编译时都会被打包进 vendor.js，导致 vendor.js 文件体积异常庞大，进而影响页面的渲染速度。为了减轻这一问题，我们可以通过引入 CDN 链接将库分离并异步加载 js 库，以优化编译后的体积。

CDN 链接的引入

CDN（内容分发网络）通过将静态资源缓存到分布在全球各地的服务器上，从而缩短了用户访问这些资源的距离和时间。通过在 Webpack 中引入 CDN 链接，我们可以将库文件托管在 CDN 上，并通过 CDN 的地址引用它们。这样一来，这些库文件就可以从离用户最近的服务器上加载，从而加快加载速度。

在 Webpack 中引入 CDN 链接非常简单。只需在项目的 webpack.config.js 文件中配置 externals 选项即可。例如，要从 unpkg CDN 加载 Vue.js，可以这样配置：

externals: {
  'vue': 'Vue'
}

配置完成后，在代码中就可以直接使用 Vue.js，而无需再将其导入。

多线程异步加载 js 库

引入 CDN 链接后，我们还可以通过多线程异步加载 js 库来进一步优化加载速度。Webpack 的 SplitChunksPlugin 插件可以将 vendor.js 分割成多个更小的块，并并行加载这些块。这将允许浏览器同时从多个线程加载库文件，从而提高加载效率。

在 webpack.config.js 文件中配置 SplitChunksPlugin 如下：

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

实际应用中的示例

我们以 Vue 项目为例，使用 CDN 链接和多线程异步加载 js 库来优化编译后的体积。

1. 在 webpack.config.js 文件中配置 CDN 链接：

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter'
}

2. 在 webpack.config.js 文件中配置 SplitChunksPlugin：

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

3. 在 main.js 文件中直接使用 Vue.js 和 VueRouter：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [...]
})

new Vue({
  router
}).$mount('#app')

通过以上配置，Vue.js 和 VueRouter 将从 unpkg CDN 上加载，并通过多线程异步加载的方式提升加载速度。