vue first screen optimized loading (3) (CND reference)

# Import using the cnd node in the root directory index.html

Because Element depends on Vue, vue.js needs to be introduced before element-ui, so vue.js should also be changed to the way cdn is introduced

<!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>

# Add externals to build / webpack.base.config.js in the root directory

The global variable set by the cdn version of element-ui is ELEMENT

......

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

# Main.js import… from… and Vue.use (…) can be removed. If webpack is not removed, the corresponding dependencies will still be packaged

Because vue and element-ui are imported with cnd nodes, the vue and element-ui imported in main.js can be commented out (if not commented out, webpack will still package the corresponding dependencies)

// 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/>',
});

# After npm run build is successful you will find that vendor.js is much smaller

Practicing Typing Ape

Published 34 original articles · Likes0 · Visits 512

Private letter concerns

vue first screen optimized loading (3) (CND reference)

# Import using the cnd node in the root directory index.html

# Add externals to build / webpack.base.config.js in the root directory

# Main.js import… from… and Vue.use (…) can be removed. If webpack is not removed, the corresponding dependencies will still be packaged

# After npm run build is successful you will find that vendor.js is much smaller

Guess you like