webpack打包后引用cdn的js_详解Webpack如何引入CDN链接来优化编译后的体积

背景

在 Vue 项目中，引入到工程中的所有 js 文件，编译时都会被打包进 vendor.js，也就导致了 vendor.js 文件体积变得相当臃肿，一定程度上影响着页面的渲染。为了减少编译后的体积，提高页面渲染速度，我们可以通过引入 CDN 链接把库分离，多线程异步 js 库，从而达到加速渲染的目的。那么我们如何做呢？

步骤

1.引入CDN链接

在项目的 index.html 中，常规方式引入 CDN 链接，此处以 vue 和 element-ui 为例：

2.添加externals属性

Vue-cli 2

在项目的 build/webpack.base.conf.js 中，在下面合适位置添加 externals 相关语句，在 entry 后面加入即可：

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 = {<