vue cli4打包优化

1. 使用cdn

public目录下index.html

 <!-- 引入样式 -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <!-- 引入组件库 -->
   <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
   <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
   <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
   <script src="https://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

cdn引入最好写在body上面 否则打包后会出现 xxx is notdefined

2. 删除main.js的important xxx from xxx 与 Vue.use() 不删除的话打包还是会打包这些模块,打包后chunk-vendors.6bf9f4fc.js文件过大一般是这个原因

注意不要误删引入的本地模块

import App from './App.vue'
import components from '@/utils/components.js'
Vue.use(components)
Vue.prototype.$http = axios
import store from './store/index'
import router from './router/index'
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
new Vue({
   render: h => h(App),
   router,
   store,
}).$mount('#app')

3. 根目录下新建vue.config.js文件

module.exports = {
   lintOnSave: false,
   //runtimeCompiler: true,
   publicPath: './', // 设置打包文件相对路径
   configureWebpack: {
       externals: {
           'vue': 'Vue',
           'vue-router': 'VueRouter',
           'vuex': 'Vuex',
           'axios': 'axios',
           'element-ui': 'ELEMENT',
           'echarts': 'echarts' // 配置使用CDN
       }
   },
   devServer: {
       // open: process.platform === 'darwin',
       // host: 'localhost',
       //去除eslint
       overlay: {
           warnings: false,
           errors: false
       },
      
   },
}

publicPatn默认的路径是 “/” 但是打包后打开index.html会出现Failed to load resource: net::ERR_FILE_NOT_FOUND的错误
这里需要改成 "./"
在配置路由表的时候 需要设置路由为 hash模式 否则打包后打开index.html会默认跳到你设置的404页面

4. 路由懒加载

路由表内

{
  // 登录页
  path: '/login',
  name: 'login',
  component: resolve => (require(["@/pages/login/login"], resolve))
        },

组件内引用

components:{
    Sidebar:() => import("../../components/Sidebar")
  },

打包命令

npm run build --report

大概300多kb