详解Webpack如何引入CDN链接来优化编译后的体积

背景与优化目标

背景

在 Vue 项目中，所有引入的 JavaScript 文件在编译时通常会被打包到 vendor.js 中，这导致该文件体积庞大，进而影响页面渲染性能。为减小编译后文件的体积并提升页面渲染速度，可以通过引入 CDN 链接将第三方库分离，利用多线程异步加载 JS 库，从而加速页面渲染。具体操作如下。

Webpack 配置 CDN 步骤

步骤

第一步：引入 CDN 链接

1. 引入 CDN 链接

在项目的 index.html 文件中，以常规方式引入 CDN 链接。此处以 vue 和 element-ui 为例进行说明。

<body>
 <div id="app"></div>
 <!-- CDN方式引入vue -->
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <!-- CDN方式引入element-ui -->
 <script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script>
</body>

第二步：配置 externals 排除打包

2. 添加 externals 属性

Vue-cli 2

在项目的 build/webpack.base.conf.js 文件中，找到合适位置（通常在 entry 配置之后）添加 externals 相关语句。

module.exports = {
 context: path.resolve(__dirname, '../'),
 entry: {
 function: './src/main.js'
 },
 externals:{
 'vue': 'Vue',
 'element-ui': 'ElementUI'
 }
 ...
}

Vue-cli 3

在项目根目录的 vue.config.js 文件中，将 configureWebpack 配置代码块添加进去即可。

module.exports = {
 configureWebpack:{
 externals: {
  'vue': 'Vue',
  'element-ui': 'ElementUI'
 }
 }
}

注意：在上述代码中，'vue': 'Vue' 的形式为 key : value，其中 key 是项目中引用的名称，而 value 是资源本身定义的全局变量名（不可更改）。正常情况下，我们可以参照 src/main.js 文件进行查看。

import Vue from 'vue'
import ElementUI from 'element-ui'
//打开src/main.js查阅以上两行代码，其前面作为value，后面作为key。

第三步：注释本地引入代码

3. 注释 import 及 Vue.use(xxx)

在项目的 src/main.js 文件中，注释掉以下语句：

// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
import App from './App'

Vue.config.productionTip = false

// Vue.use(ElementUI)

注：使用 eslint 规则的项目请不要注释 import 及 Vue.use，除非你不使用那烦人的 eslint。

完成以上步骤后，即可执行 npm run build。你会发现编译后的 vendor.js 从几百 K 降到几十 K，这意味着体积优化已见成效。另外，许多网友先前为了减少体积已经配置了按需引入，如果引入了 CDN，记得把按需引入的配置去掉，因为引入 CDN 之后就不存在按需引入这种说法了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。