vue2.X代码优化

1.异步加载路由

通过  const Login = (resolve) => require(['view/login'], resolve) 方式进行路由的懒加载。虽然  const Index = () => import('@/view/index') 这种方式也能减少打包体积，但是好像效果不是很明显

2.去掉.map文件

Vue项目打包以后，会出现很多的已.map结尾的文件，这个文件其实主要是用来追踪错误的。

如果运行有问题，能提示你代码第几行有问题。在生产环境中很明显这个是不需要的。

所以找到 config文件夹下的index.js.找到  productionSourceMap:true, 将 true改为 false.这样就能减少不必要的文件。

3.CDN加速，同时锁定版本号

 

找到build文件夹，里面有个webpack.base.conf.js文件。在entry下面 我们可以添加一个字段 

externals：{

   'vue': 'Vue', 

   'element-ui': 'ELEMENT',

   'vue-router': 'VueRouter', 

   'axios': 'axios

'}，

在项目的根目录下找到index.html文件，在里面加上对应的库的CDN地址：

　　<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

　　<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>

　　<script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.js"></script>

　　<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

　　<script src="https://unpkg.com/element-ui/lib/index.js"></script>

这样可以很大程度降低verdor.js大小

4. CSSM模块化

 

将webpack.prod.conf.js中 设置css allChunks字段变为false，

这一步就是将所有的css文件进行拆分。

这样可以很大程度降低app.css大小 (首屏加载速度会明显加快)

5. 大图片压缩处理

 

使用 image-webpack-loader等插件做处理