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

朴灿烈づ我的快乐病毒、 2021-11-02 16:44 532阅读 0赞

背景  
在 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 = {
     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 之后就不存在按需引入这种说法啦！  
![在这里插入图片描述][aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]

[aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]: /images/20211101/f1ffb2f0de2446d5914882f86f5b25d1.png