vue项目开发打包 环境优化 和 外部 CDN 资源

为开发模式与发布模式指定不同的打包入口

默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即 src/main.js）。为了将项目 的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即： ① 开发模式的入口文件为 src/main-dev.js ② 发布模式的入口文件为 src/main-prod.js

4. configureWebpack 和 chainWebpack

在 vue.config.js 导出的配置对象中，新增 configureWebpack 或 chainWebpack 节点，来自定义 webpack 的打包配置。

在这里， configureWebpack 和 chainWebpack 的作用相同，唯一的区别就是它们修改 webpack 配置的方 式不同： ① chainWebpack 通过链式编程的形式，来修改默认的 webpack 配置 ② configureWebpack 通过操作对象的形式，来修改默认的 webpack 配置

两 者 具 体 的 使 用 差 异 ， 可 参 考 如 下 网 址 ： webpack 相关 | Vue CLI🛠️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3

5. 通过 chainWebpack 自定义打包入口

代码示例如下：

在 项目vue.config.js中：

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

通过 externals 加载外部 CDN 资源

默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功 后，单文件体积过大的问题

为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包，都不会被打包 

module.exports = {
  chainWebpack: (config) => {
    config.when(process.env.NODE_ENV === "production", (config) => {
      config.entry("app").clear().add("@/main-prod.js");
      config.set("externals", {
        vue: "Vue",
        axios: "axios",
        lodash: "_",
        echarts: "echarts",
        nprogress: "NProgress",
        "vue-quill-editor": "VueQuillEditor",
      });
    });
    config.when(process.env.NODE_ENV === "development", (config) => {
      config.entry("app").clear().add("@/main-dev.js");
    });
  },
};

同时，需要在 public/index.html 文件的头部，添加如下的 CDN 资源引用：

<!-- nprogress 的样式表文件 -->
<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" />