标签：设置 require 官网 表示 com one vuex lazy div
Vue项目部署上线后经常会发现首屏加载的速度特别慢：那么有那写能做的简单优化呢
一、路由的懒加载
路由懒加载也就是 把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。
在router中，我们平时是这样引入组件的：
import Foo from ‘./Foo.vue‘
文档中指出，如下定义一个能够被 Webpack 自动代码分割的异步组件
const Foo = () => import(‘./Foo.vue‘)
在路由配置中什么都不需要改变，只需要像往常一样使用 Foo：
const router = new VueRouter({ routes: [ { path: ‘/foo‘, component: Foo } ] })
官网介绍地址：
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
二、使用cdn
打包时，把vue、vuex、vue-router、axios等，换用国内的bootcdn直接引入到根目录的index.html。
在webpack build 下 base.conf.js 设置中添加externals，忽略不需要打包的库。
module.exports = { context: path.resolve(__dirname, ‘../‘), entry: { app: ‘./src/main.js‘ }, externals:{ ‘vue‘:‘Vue‘, ‘vue-router‘:‘VueRouter‘, ‘vuex‘:‘Vuex‘ }, // 格式为‘aaa‘:‘bbb‘，其中，aaa表示要引入的资源的名字，bbb表示该模块提供给外部引用的名字，由对应的库自定。例如，vue为Vue，vue-router为VueRouter
去掉原有的引用直接使用就可以了，否则还是会打包
具体步骤为
（1）、引入
在这里有些名字是不能变的，尽量按照规定的来写
‘vue‘: ‘Vue‘, ‘vuex‘: ‘Vuex‘, ‘vue-router‘:‘VueRouter‘, // ‘axios‘: ‘axios‘, ‘element-ui‘: ‘ElementUI‘
2、引入cdn。推荐引入 百度静态资源库的
地址为：https://www.bootcdn.cn/
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.0/theme-chalk/index.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.0/index.js"></script>
3、注释
main.js中
// import Vue from ‘vue‘ // import ELEMENT from ‘element-ui‘ // Vue.use(ELEMENT) // import ElementUI from ‘element-ui‘ // import ‘element-ui/lib/theme-chalk/index.css‘ // Vue.use(ElementUI)
router.js中
// import Vue from ‘vue‘ // import Router from ‘vue-router‘ Vue.use(VueRouter)
use不能去在router中。
再就是vuex文件中的注释了
4、删除掉 package.json 里面原本引入的。
标签：设置 require 官网 表示 com one vuex lazy div
原文地址：https://www.cnblogs.com/haonanZhang/p/9792415.html
