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之前端性能优化

若有其余前端优化方式，请贴评论。

来源：oschina

链接：https://my.oschina.net/u/3234420/blog/2248872