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

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

说明：将程序打包的特点就是，访问程序中的任何一个路由，都会将整个包下载到客户端，这可能会导致程序的加载速度非常慢，可以通过开发者工具切换网络，模拟这个情景，所以我们应该想办法减少这个包的体积
解决方法主要是两个
一个是使用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>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script>

在 vue.config.js 中添加配置

测试打包后的文件是否可以正常显示

1. 先创建一个node项目，node项目中先初始换一下 nop init -y
2. 使用npm i express下载 express
3. 然后再app.js中开启一个服务，

const express=require('express')
const app=express()

app.use(express.static('./dist'))
app.listen(8080,()=>{
   console.log('Sever is running at http://127.0.0.1:8080')
})

4. 把上写打包的文件dist 复制到node项目中，再node中打开