利用vue-cli生成的项目

经过优化最终打包结果：

  

 

 

 

 

 

各个文件都不是很大了！

下面总结一下自己的打包优化心得：

1.像Vue 、element-ui 、vue-router 、vuex 、babel-polyfill 这些都不用打包，打包后很大的，可以引用cdn

<!-- 引入样式 -->
<link href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel="stylesheet">
<!-- 引入组件库 -->
<script src="//cdn.bootcss.com/babel-polyfill/7.0.0-alpha.15/polyfill.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.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/element-ui/2.0.7/index.js"></script>
<script src="https://cdn.bootcss.com/vuex/2.3.1/vuex.min.js"></script>

在webpack.base.config.js中加入：

context: path.resolve(__dirname, '../'),
entry: {
  app: './src/main.js'
},
//新加的
externals: {
  'element-ui': 'ELEMENT',
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'babel-polyfill': 'window'
},

在main.js中有的人说把

import Vue from 'vue'

import ElementUI from 'element-ui'

这些去掉，我没去,项目能正常运行，加东西比改东西我觉得安全多了，去不去的根据控制台提示信息做决定，如果控制台说某个东西只能用一次，说明多用了一次，那就去掉，反之，随便哈哈！

用vue-cli框架生成的项目，webpack.prod.conf.js中的配置已经非常完善了，个人目前没有对它进行太大的改动，由于是多页面开发，也只是在其基础上copy了 new HtmlWebpackPlugin（{}），改改template和chunks

2.路由懒加载，

// 懒加载方式，当路由被访问的时候才加载对应组件
const Login = () => import('components/login/login.vue')
const Home = () => import('components/home/home')
const ClassManage = () => import('components/classManage/classManage')

3.第三方模块懒加载，用到的时候才加载

项目中用到了vue-image-crop-upload图片上传插件

如果在组件中直接 import  MyUpload from ‘vue-image-crop-upload’ 会直接打包到vendor，增加vendor体积

如果 const MyUpload=()=>import('vue-image-crop-upload') 这样调用，就不会打包到vendor

 

目前这些已经把项目打包的非常小了！如果有不对的地方欢迎指正！