Vue项目打包步骤详细流程，新手必需掌握的知识点！

Vue项目打包流程介绍

新手必须要懂的 Vue项目打包 ，

生成打包报告

为能更加清楚直观的发现我们项目中存在的问题，我们可以在打包时生成一份打包报告，打包报告生成的方式有两种：

1. 通过命令生成
   通过vue-cli的命令可以生成打包报告 report.html

 vue-cli-service build --report 

2. 通过可视化控制面板直接查看
   推荐使用这种方式。在vue-cli3以上版本，通过vue ui进入的可视化控制面板中可以清楚的看到项目存在的问题与详细情况。控制台和分析面板可以看到项目中存在的问题，仪表盘可以看到每个包占的内存。

修改默认配置

vue-cli3隐藏了所有的webpack配置项，我们需要在vue.config.js中队我们项目打包发布作自定义配置，常用如下：

module.exports = {
  publicPath: "/", // 部署应⽤包时的基本 URL
  outputDir: "dist", // npm run build ⽣成的⽂件夹，默认是dist
  assetsDir: "static", // 在kaixin⽂件夹下⾯⽣成static⽬录存放js,img,css等静态资源
  indexPath: "index.html", // ⽣成的单⽂件的，⽂件名，
  devServer: {
    host: "127.0.0.1", // 配置主机地址
    port: process.env.NODE_ENV == 'production' ? 3000 : 8888, // 配置运⾏的端⼝
    
    // proxy: "接⼝地址",  跨域代理！ 【重要！】
    proxy: { // 配置多个！
      '/api': {
        target: 'http://localhost:3030/api',
        ws: true, // 跨域地址是https协议！
        changeOrigin: true,
        pathWrite: {
          "^/api": ""   // 将 '/api' 替换成 ''  
        }
      }
    },
  }
}

具体参考文档https://cli.vuejs.org/zh/config/#vue-config-js

指定打包入口

默认情况下Vue的开发模式和生产模式公用一个打包入口文件（main.js)。为了分离两者，我们指定两种模式的打包入口文件：

1. 开发模式：src/main-dev.js
2. 生产模式：src/main-prod.js
   

通过external加载外部CDN资源

默认情况下，通过import引入的三方依赖包最终会一并打包到文件中，由此我们打包后项目体积会过大。
中上所述，我们可以通过webpack的externals节点来配置并加载外部的CDN资源。凡是在externals中声明的三方依赖包都不会被打包。
如下图：
同时我们需要在public/index.html文件头部添加如下的CDN资源引用：
据上述操作后，我们的文件体积减少了非常多。

优化组件库的打包

开发模式中，虽然已经对组件库使用了按需加载的模式，但是打包后还是产生了体积较大的文件，因此同上操作，我们也可以采用CDN加载组件库的js和css文件。

现在我们的项目体积基本已经没有什么问题

首页内容定制

我们可以根据不同的环境来定制首页内容。通过插件来进行配置，参考如下：

在pubilc/index.html中根据isProd的值来决定如何渲染页面结构：

1. 指定标题在不同模式下显示：

2. 资源加载判断：

路由懒加载

打包项目后js文件太大，会影响我们的页面打开加载速度，因此我们需要把js文件分割成多个代码块，然后当我们的路由访问时再加载相对应的组件。常用的有三种方式
1. vue异步组件
2. es提案的import()
3. webpack的require,ensure()

这里我们采用es提案的import（）

1. 首先我们需要安装@babel/plugin-syntax-dynamic-import包
2. 再babel.config.js配置文件种声明该插件
3. 将路由改为按需加载形式

webpackChunkName后面是组名，将组件分组后最后同组的将被打包到同一js文件

// import Home from './components/Home.vue'
// 在一般情况下一个组件会被打包出一个js文件，
// 但是我们指定相同的webpackChunkName的组件将被打包在统一js文件
const Home = () => import(/* webpackChunkName: "group-foo" */ './Home.vue')

具体参考文档
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html