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

时间 2019-12-02

原文原文链接

背景

在 Vue 项目中，引入到工程中的全部 js 文件，编译时都会被打包进 vendor.js，也就致使了 vendor.js 文件体积变得至关臃肿，必定程度上影响着页面的渲染。为了减小编译后的体积，提升页面渲染速度，咱们能够经过引入 CDN 连接把库分离，多线程异步 js 库，从而达到加速渲染的目的。那么咱们如何作呢？
css

步骤

1.引入CDN连接

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

<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>
复制代码

2.添加externals属性

Vue-cli 2
vue

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

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

Vue-cli 3
web

在项目根目录的 vue.config.js 中，将 configureWebpack 配置代码块添加进入便可：
npm

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

注意：在上述代码中，'vue': 'Vue' 对应形式为 key : value，其中 key 为项目中引用的名称，而 value 是资源自己定义的名称（不可改），正常状况下咱们能够参照 src/main.js 进行查看：
element-ui

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

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

在项目的 src/main.js 中，注释掉如下语句：
bash

// 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 以后就不存在按需引入这种说法啦！app