vue 首屏优化加载（三）（CND引用）

最新推荐文章于 2024-04-22 16:52:08 发布

实习打字猿

最新推荐文章于 2024-04-22 16:52:08 发布

阅读量341

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42863549/article/details/104609046

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

# 在根目录 index.html 使用 cnd 节点导入

因为Element依赖Vue，vue.js需要在element-ui之前引入，所以vue.js也要改为cnd的引入方式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>chenbz</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </body>
</html>

# 根目录下build/webpack.base.config.js中添加externals

cdn 版本的 element-ui 设置的全局变量是 ELEMENT

......

module.exports = {
  ......,
  externals: {
    'vue' : 'Vue',
    'element-ui' : 'ELEMENT',
  }
};

# Main.js 中import … from …与Vue.use(…)就可以去掉了，若没去掉webpack还是会把对应的依赖进行打包

因为 vue 与 element-ui 用 cnd 节点导入，所以在 main.js 中 import 的 vue 和 element-ui 可以注释掉（如果没有注释掉，webpack还是会把对应的依赖进行打包）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// import Vue from 'vue'
import App from './App'
import router from './router'

// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
// render: h => h(App),
  router,
  components: { App },
  template: '<App/>',
});