vue-cli新建工程后提升页面加载速度（含升级webpack4）

提升页面加载速度的方式

升级webpack4.x及升级过程当中产生问题的解决方式

webpack升级一路填坑记

图片压缩

• 用一个webpack插件，这个插件叫 image-webpack-loader。
• 安装插件： $ npm install image-webpack-loader --save-dev
• 相关配置修改以下：

//webpack.base.conf.js
//原先配置
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
	limit: 10000,
	name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
}
//修改后配置
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: []'url-loader?limit=10000&name='utils.assetsPath('img/[name].[hash:7].[ext]'),'image-webpack-loader']
}

• 修改后查看对比

//源文件
$ ls -lh src/images
total 256
//压缩后
$ ls -lh dist/images
total 96

路由懒加载，生成多个小js文件按需加载

{
	path: '/login',
	name: 'login',
	component: resolve => { require(['@/components/login.vue'],resolve) }
}

gzip压缩

• 启用gzip压缩，很简单，工程下的config/index.js中，将productionGzip由false改成true,除此以外，就须要后台修改配置，返回gzip文件，具体方式网上不少，我在下面贴几个。我试过，这个方式会很好的压缩了文件，将app等文件压缩到很小，因此页面加载下载文件会小不少，但时间上，不必定。。。并且对于IE11来说，这个好像不能实现。。。
• gzip实现方式：
  • vue 进行 gzip压缩和服务器如何开启gzip
  • vue2首页加载慢的问题
  • 关于vue在app首次加载缓慢的解决办法
  • 前端性能优化之gzip

取消打包后的map文件

• 在打包vue文件时，会发现出现不少.map文件，
• map文件的做用：项目打包后，代码都是通过压缩加密的，若是运行时报错，输出的错误信息没法准确得知是哪里的代码报错。有了map就能够像未加密的代码同样，准确的输出是哪一行哪一列有错。
• map文件下载时需占用太多浏览器资源，并且特别耗时，致使加载速度慢，能够在生产环境取消生成map文件。在工程/config/index.js文件配置中，将productionSourceMap由true改成false便可。

传送门

• JS/CSS 体积减小了 67%，咱们是如何作到的？
• webpack4之splitchunksPlugin拆拆拆--项目实践
• vue多页面首页加载优化
• webpack以前端性能优化

如有其他前端优化方式，请贴评论。