火星基地

当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。安装@babel/plugin-syntax-dynamic-import包在babel.config.js配置文件中声明该插件将路由改为按需加载的形式，示例代码如下const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')co

在main-prod.js中，注释掉element-ui按需加载的代码在index.html的头部区域中，通过 CDN 加载element-ui的 js 和 css 样式：<!-- element-ui 的样式表文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/themechalk/index.css" /><!-- element-ui 的 js 文件 --.

在项目配置文件vue.config.js中的发布模式添加如下：config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor'})然后，在index.html文件的

默认情况下，Vue 项目的开发模式与发布模式，共用同一个打包的入口文件（即src/main.js）。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：开发模式的入口文件为src/main-dev.js发布模式的入口文件为src/main-prod.js在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来自定义 webpack 的打包配置。在这里，configureWebpack和chainWebpa