vue项目打包之减小包的体积

默认情况下，凡是通过 import 方式引入的包，打包时都会被打包，这就会导致最后的包体积比较大，伴随而来的就是程序的加载速度慢

说明：将程序打包的特点就是，访问程序中的任何一个路由，都会将整个包下载到客户端，这可能会导致程序的加载速度非常慢，可以通过开发者工具切换网络，模拟这个情景，所以我们应该想办法减少这个包的体积

解决方法主要是两个

一个是使用CDN

一个是路由的懒加载

先说 CDN

核心思想就是将线上环境中用到一些依赖，比如 vue、vueRouter 、axios 等，使用 cdn 节点的方式引用，而不是打到包里去，当然我们开发时依赖的一些包，最好还是使用本地包，而不是 cdn 

比如我将当前项目上线后仍然需要用到的一些依赖包从 main.js 中删除，然后在 public/index.html 中加入 cdn 节点引用

修改生产环境入口文件

凡是通过CDN节点方式引用的包，在这里都删除

 

上面这些都可以删除，这里注释的目的是为了对比变化

然后在 public/index.html 中加入如下引用

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.core.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.bubble.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
    <script type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>

在 vue.config.js 中添加配置

 

重新运行下面命令，编译后发现包的体积小了很多

npm run build

注意：经常会出现第一次编译出错，第二次编译成功的情况

使用 CDN 的方式能够充分利用浏览器的算力，从多个节点加载包，提升程序的访问速度