Vue项目优化-通过externals加载外部CDN资源

  继续记录学习过程。
  在查看打包报告时，通过VueCli的可视化UI面板运行build查看报告，发现还是有文件体积较大，这样的大文件可能会造成长时间请求，等待时间过长。

  解决这个问题，先要弄清楚这个文件是怎么来的，其实，在默认情况下，我们通过import语法导入的第三方依赖包，最终都会打包合并到一个文件中，打包成功后，这个文件自然过大。我们可以通过webpack的externals节点，来配置并加载外部的CDN资源，凡是声明在externals中的第三方依赖，都不会被打包，这样就可以有效的减少单个文件的体积。
a.在vue.config.js文件中添加配置项，只需要在发布模式下进行配置:

  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
        config.entry('app').clear().add('./src/main-prod.js')

        config.set('externals', {
          vue: 'vue',
          'vue-router': 'VueRouter',
          axios: 'axios',
          lodash: '_',
          echarts: 'echarts',
          nprogress: 'NProgress'
        })
  },
}

b.删除相应的improt,我这里只删除main-prod.js中的类似的内容

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

c.在public目录下的index.html文件头部，添加CDN资源引用:

<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /> 
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" /> 
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" /> 
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" /> 

当然还有这些

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script> 
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script> 
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> 
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script> 
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script> 
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script> 
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script> 

  做完这些，重新build,发现大文件小了很多，效果立竿见影，但是发现依赖项中elemnt-ui也是一个大文件，虽然我们在开发的过程中，Element-ui的内容是按需引入，尽可能减少了打包的体积，但是那些被需要的组件，任然占据了很大的体积，此时，我们也需要通过CDN的形式来加载，这样能够进一步减小打包后的体积。过程还是原来的配方，再走一遍流程：a.在 main-prod.js中，注释掉element-ui按需加载的内容；
b.在index.html的头部区域中，通过CDN加载element-ui的js和css样式
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" /> <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
重新执行build,查看结果：

  从生成的报告中我们可以明显的看到单文件体积的减少，还有依赖项目大小的减少，请求时间也大大的缩短了。而在右边依赖项中我们也可以发现少了一些依赖包，这是因为通过externals最终这些依赖不会打包到项目中。而在使用到这些依赖的时候，我们会从window全局找到这个依赖包。