用vue-cli创建的项目过大,各种优化

1.首先肯定是路由懒加载

const Home = resolve => require([’@/components/home/home’], resolve); //详情

不是懒加载

import Home from ‘@/components/home/home’ //详情

2.在webpack的config/index.js文件中配置

productionSourceMap:false

把这个改为false。不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。

productionGzip:true

在配置productionGzip等于true的时候打包会报错,这个时候我们需要安装 “compression-webpack-plugin”: “^1.1.12”,因为我的webpack版本为3.6.0所以compression-webpack-plugin不接受新版本。

3.cnd引入一些插件

首先在index.html里面用cnd引入需要用到的插件

然后在webpack.prod.conf.js里面配置:如图
用vue-cli创建的项目过大,各种优化