项目优化操作

项目优化操作

1.为开发模式和发布模式指定不同的打包入口

• 开发模式的入口文件为 src/main-dev.js
• 发布模式的入口文件为 src/main-prod.js

1.1.修改打包入口可以通过 configureWebpack 和 chainWebpack 节点来定义webpack的打包配置

• configureWebpack 通过操作对象的形式修改配置
• chainWebpack 通过链式编程的形式修改配置
  

2. 通过externals 加载外部CDN资源

同时，需要在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" />

 <!-- 引入js文件(cdn) -->
    <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>

    <!-- 富文本编辑器的 js 文件 -->
    <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>