关于cdn:Vue中使用cdn加载资源加快打包速度

Vue 我的项目打包的时候，默认会 把所有代码合并 生产新文件, 其中包含各种库导致打包进去很大。如果应用 cdn 的话, 会更利于程序的加载速度。

在 Vue 我的项目中，引入到工程中的所有 js、css 文件，编译时都会被打包进 vendor.js，浏览器在加载该文件之后能力开始显示首屏。若是引入的库泛滥，那么 vendor.js 文件体积将会相当的大，影响首开的体验。

将援用的内部 js、css 文件剥离开来，不编译到 vendor.js 中，而是用资源的模式援用，这样浏览器能够应用多个线程异步将 vendor.js、内部的 js 等加载下来，达到减速首开的目标。

内部的库文件，能够应用CDN 资源，或者别的服务器资源等。

打包工夫太长、打包后代码体积太大，申请慢
服务器网络不稳带宽不高，应用 cdn 能够回避服务器带宽问题

上面，以引入 vue、vuex、vue-router 为例，阐明解决流程。

在我的项目根目录 index.html 应用 cdn 节点导入

<body>
 <div id="app"></div>
 <!-- built files will be auto injected -->
 <!-- 开发环境 -->
 <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
 <!-- 生产环境 -->
 <!--<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>-->
 <!-- 引入组件库 -->
 <script src="https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/axios/0.23.0/axios.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.15.6/index.js"></script>
 <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</body>

在 vue.config.js 中退出 externals 内部扩大

configureWebpack: {
    externals: {
        "vue": "Vue",
        "vue-router": "VueRouter",
        "axios": "axios",
        "moment": "moment",
        "element-ui": "ELEMENT",
    }
},

这里解释一下externals 配置选项的作用：

咱们想援用一个库，然而又不想让 webpack 打包，并且又不影响咱们在程序中以 CMD、AMD 或者 window/global 全局等形式进行应用，那就能够通过配置 externals。

踩坑配置留神点：element-ui 要大写为 ELEMENT

去掉原有的援用
如果不删除原先的 import，我的项目还是会从node_modules 中引入资源。\
也就是说不删的话，npm run build时候仍会将援用的资源一起打包，生成文件会大不少。所以我认为还是删了好

打包比照

引入 node_modules 中模块：能够看到 element 和 moment 占比大

CDN引入模块：

可能看到 vendor.js 文件大大减少，打包速度也快了不少

Vue Cli（@/vue/cli）自带的 webpack 包体积优化工具，它能够查看各个模块的 size 大小，不便优化。只须要在 build 前面加上 –report 参数即可。

咱们把命令配置到 package.json 里
```
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "report": "vue-cli-service build --report"  // 退出该行
},
```
执行 npm run report 打包并生成 report。\
留神：网上很多说要先装置 webpack-bundle-analyzer 包，其实不须要装置。
运行 npm run report 后，会在 build 的同时，在 dist 目录会生成一个 report.html，关上后可看到各文件占用大小

关于cdn:Vue中使用cdn加载资源加快打包速度

为什么应用 CDN

解决办法

应用 CDN 次要解决两个问题

具体步骤

资源引入

打包比照

问题集

vue-cli 4 应用 report 剖析 vendor.js